JQuery

Stella981 等级 250 0 0

一、jq简介

jq其实就是js的一个文件。

二、jq书写步骤

1、先引入jq文件(min的文件)

2、换新的一行写js代码

3、按照jq的语法写代码

三、入口函数的不同

js的入口函数只能有一个,如果写了多个,它只执行最后一个。

jq的入口函数可以有多个,可以顺序执行每一段

注意:入口函数有一个就够了,不用写很多

四、对象

jquery对象   使用$('')从页面中得到的元素,就是jq对象

DOM对象      使用document从页面中得到的元素,就是DOM对象

区别:

jq:苹果手机   ios系统 不能双卡双待 不能换电池

DOM:安卓手机 安卓系统 可以双卡双待 可以换电池

结论:DOM对象和jq对象的方法是不可混用的

五、对象转换

jq转DOM:[0]或者.get(0)

DOM转jq:$(box)

六、jq控制css

单属性修改:.css('属性名','属性值');

多属性修改:.css({'属性名1':'属性值1','属性名2':'属性值2',.......})

单属性获取:.css('属性名');

七、jq控制HTML标签属性

语法同上:.attr()

八、jq控制html内容

设置:.html('设置的内容');

获取:.html();

九、jq的对角线动画

.show(1000)   显示

.hide(1000)     隐藏

.toggle(1000)  切换

注意:如果只写了以上这些方法,是不会有动画效果的,不需添加时间参数才会出现动画效果。

十、jq滑动动画

.slideUp()        滑动隐藏

.slideDown      滑动显示

.slideToggle()  滑动切换

注意:这组动画,不加时间参数也可以有动画效果

十一、jq基本选择器

1、$('#id'):id选择器

2、$('div'):标签选择器

3、$('.myClass'):类选择器,返回所有class="myClass"的元素

4、$('*'):返回所有元素,多用于结合上下文搜索

5、$('div,span,p,myClass'):多条件选择器,返回所有查到的元素

6、$('.ul01 .li02'):后代选择器

7、$('.ul01 .li02>li'):表示子代选择器,只能选择第一级的后代

8、$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签

9、$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签

十二、jq过滤选择器

:first     选中第一个

$('.ul01 li:first').css('background','pink')

:last     选中最后一个 

$('.ul01 li:last').css('background','pink')

:not()    除了哪一个其他的。。。

$('.ul01 li:not(.myClass01)').css('background','pink')

:eq()     选中某一个

$('.ul01 li:eq(0)').css('background','pink')

:gt()      大于某一个

$('.ul01 li:gt(2)').css('background','pink')

:lt()        小于某一个

$('.ul01 li:lt(2)').css('background','pink')

十三、筛选选择器

重点:所有的筛选选择器写在选择函数外

三巨头:父、子、兄

$('div').parent()    选中父级元素

$('div').children()  选中子集元素

$(this)                   代表当前对象(跟js里面的this一样)

$(this).$siblings$()  最牛的筛选选择器 免除所有的排他工作,可以选出除了自己以外的所有同级元素。 

$('div').find(p)   搜索所有div中的后代 p元素.

十四、jq的动画排队机制

在jq如果多次出发动画,那么这些动画就会排队等待执行,而这些效果,往往不是我们想要的,所以我们可以在动画的方法之前添加一个.stop()方法来解决此排队问题。

十五、hover方法

.hover(function(){

//鼠标移入事件

},function(){

//鼠标移出事件

})

注意:如果只写了一个匿名函数,代表移入和移出执行的代码一样

十六、索引值

在jq中用选择器选出来元素都有一个index(),可以返回这个元素在父级元素中的索引值(自己家孩子排大小,跟隔壁家没关系)

十七、jq控制class

在jq中,使用attr()方法可以将控制calss,但是jq中专门准备了一系列方法空值class的值。

1、添加类                         addClass('类名')

2、删除类                         removeClass('类名')

3、判断是否有某一个类    hasClass('类名')

4、切换某一个类               toggleClass('类名')

注意:这些类名不用再加     '.'

十八、jq中的链式编程

在jq中如果是针对“同一目标”进行的操作,都可以使用“.”语法来连续书写,这叫jq的链式编程。

收藏
评论区

相关推荐

JQ面试问题(转载)
1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,动画啊,表单啊,ajax事件等 配置Jquery环境 下载jquery类库 在jsp页面引用jquery类库即可 <script type="text/javascript" src="jquery/jquery-1.7.2
JS中的匿名函数自执行、函数声明与函数表达式
先看一段jQuery源码中匿名函数自执行的例子: (function( window, undefined ) { // jquery code })(window); 另外一种常见的写法: +function( $ ) { // jquery code })(window
Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)
//这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES6中导入模块的方式 //由于ES6的语法太高级,浏览器解析不了次引入方式 import $ from 'jqu
Django(十二)视图
一、Ajax基本概念 ========== 【参考】:[https://www.runoob.com/jquery/jquery-ajax-intro.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.runoob.com%2Fjquery%2Fjquery-ajax-i
Echarts全国地图二级钻取
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></script> </h
HTML5 canvas 在线涂鸦
插件地址 ==== [http://bencentra.github.io/jq-signature/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fbencentra.github.io%2Fjq-signature%2F) 采用技术 ==== * jq-signature.m
Highcharts的一些属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min
JFinal——Jquery
        最近在使用[神奇的Jfinal](http://www.oschina.net/p/jfinal)框架写项目的时候想用类似搜索框自动完成的效果,经过一番搜索后发现jquery的autocomplete比较不错,前台数据的处理基本都封装好了,可谓万事俱备只欠数据了。准备好所需的文件和写好后台的数据库查询之后发现一个很严重的问题,返回什么数据?返
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JQuery事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/
JavaScript 从select表中获取数据在表格中添加行
<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <link rel="stylesheet" href="css/mian.css"/>     <script src=
Jquery从入门到放弃(八)
杂项: === 一、 noConflict() --------------- 为防止简写符号‘$’和其他JS库发生冲突,执行此语句后,jquery会释放出 "$"符号,自己使用jquery全称 $.noConflict(); jQuery(document).ready(function(){ jQuery("button
RF日志文件(log.html)解读一
引入的js库: Jquery,Jquery templates plugin,Jquery tablesorter,JsxCompressor(JSXGraph) 版本都很老,而且有些还是废弃的项目(Jquery templates plugin),但是脚本都直接写进了html页面中,所以版本问题无影响 页面呈现的内容:统计列表,python运行时错误
Struts2 整合jQuery实现Ajax功能
Struts2 整合jQuery实现Ajax功能 技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。 **首先明确个概念:** jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件。也就是说,jQuery基本上就是个js程序集,**基础核
ssm(Spring、Springmvc、Mybatis)实战之淘淘商城
文章大纲 ---- 一、淘淘商城总体架构介绍 二、淘淘商城重要技术点总结 三、项目常见面试题 四、项目学习(all)资源下载 五、参考文章 一、淘淘商城总体架构介绍 ------------ ### 1\. 功能架构 ### 2\. 技术选型 (1)Spring、SpringMVC、Mybatis (2)J