一.jQuery和js的关系
jQuery就是一个js库。
jQuery的入口函数:$(function(){}); 或者 $(document).ready(function(){});
js入口函数指的是:window.onload = function() {};
jQuery === $
,$ 在jQuery中就是一个函数,根据传入参数类型的不同,分别进行不同的处理,来实现不同的功能。
jQuery对象和DOM对象的相互转换
DOM对象(也叫js对象):使用js操作DOM返回的结果。
jQkuery对象:使用jQuery提供的操作DOM的方法返回的结果。
两者的区别:js对象只能调用js的方法,jquery方法只能调用jquery的方法
DOM对象转换成jQuery对象:
var $btn1 = $(btn);
此时就把DOM对象btn转换成了jQuery对象$btn1
jQuery对象转换成DOM对象:
第一种方式var btn1 = $btn[0];
第二种方式var btn2 = $btn.get(0);
二.jQuery选择器
基本选择器、层级选择器同js。
基本过滤选择器
符号(名称) | 说明 |
---|---|
:first | 选取第一个元素 |
:last | 选取最后一个元素 |
:not(selector) | 选取不是这个元素的其他元素 |
:eq(index) | 选择索引号为index的一个元素,index从0开始 |
:odd | 选择索引号为奇数的所有元素,index从0开始 |
:even | 选择索引号为偶数的所有元素,index从0开始 |
:gt(index) | 选取索引大于index的元素 |
:lt(index) | 选取索引小于index的元素 |
:animated | 选取当前正在执行动画的所有元素 |
:focus | 选取当前获取焦点的元素 |
筛选选择器
符号(名称) | 说明 |
---|---|
find(selector) | 查找指定元素的所有后代元素(子子孙孙) |
children() | 查找指定元素的直接子元素(亲儿子元素) |
siblings() | 查找所有兄弟元素(不包括自己) |
:parent() | 查找父元素(亲的) |
:nth-child(index/even/odd/equation) | 选取父元素下的第index个子元素或者奇偶元素,index从1算起 |
:first-child | 获取个父元素的第一个子元素 |
:last-child | 选取父元素的最后一个子元素 |
:eq(index) | 查找指定元素的第index个元素,index是索引号,从0开始 |
index() | 获取指定元素的索引号(从0开始的) |
prevAll() | 获取指定元素之前的所有兄弟元素 |
nextAll() | 获取指定元素之后的所有兄弟元素 |
内容过滤选择器
符号(名称) | 说明 |
---|---|
:contains(text) | 选取含有文本内容为“text”的元素 |
:empty | 选取不包含子元素或者文本的空元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 |
:parent() | 选取含有子元素或者文本的元素 |
可见性过滤选择器
符号(名称) | 说明 |
---|---|
:hidden | 选取所有不可见的元素 |
:visible | 选取所有可见的元素 |
属性过滤选择器
符号(名称) | 说明 |
---|---|
[ attribute ] | 选取拥有此属性的元素 |
[ attribute = value ] | 选取属性的值为value的元素 |
[ attribute != value ] | 选取属性的值不等于value的元素 |
[ attribute ^= value ] | 选取以属性的值value开始的元素 |
[ attribute $= value ] | 选取属性的值以value结束的元素 |
[ attribute *= value ] | 选取属性的值含有value的元素 |
[ attribute = value ] | 选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符‘-’)的元素 |
三.样式操作
1、样式属性操作
.css()
- 作用:设置或获取元素的样式属性值
- 设置单个样式:
$(selector).css(“color”, “red”);
- 设置多个样式:
$(selector).css({“color”: “red”, “font-size”: “30px”})
var cssStyle = {“color”: “red”, “font-size”: “30px”};$(selector).css(cssSTyle);
- 获取样式属性操作:
$(selector).css(“font-size”);
2、类操作
- 添加类样式:
$(selector).addClass(className) 为指定元素添加类classNam
- 移除类样式:
$(selector).removeClass(className) 为指定元素移除类 className
$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类
- 判断有没有类样式:
$(selector).hasClass(calssName) 判断指定元素是否包含类 className
- 切换类样式:
$(selector).toggleClass(className) 为指定元素切换类,该元素有类则移除,没有指定类则添加。
四.jQuery节点操作
1、操作元素节点
(1)动态创建元素
var spanNode = $(“<span>我是一个span元素</span>”);
(2)添加元素
①append() 参数jQuery对象
$(selector).append($node);// 在$(selector)中追加$node
作用:在被选元素的最后一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以,如果是页面中存在的元素,那么调用append()后,会把这个元素从原先的位置移除,然后再插入到新 的位置。如果是给多个目标追加一个元素,那么append()方法的内部会复制多份这个元素,然后追加到多个目标里面去。
$(selector).append('<div></div>');// 在$(selector)中追加div元素,参数为htmlString
②appendTo()
$(selector).appendTo(node);把$(selector)追加到node中去,
③prepend()
$(selector).prepend(node);作用:在元素的第一个子元素前面追加内容或节点
④after()
$(selector).after(node);作用:在被选元素之后,作为兄弟元素插入内容或节点
⑤before()
$(selector).before(node);作用:在被选元素之前,作为兄弟元素插入内容或节点
html创建元素
- ①设置内容,参数为普通字符串
- ②创建元素,如果传入的是符合html规则的字符串,就会创建出相应的元素
$(selector).html(‘<span>这是p标签</span>’);
动态创建元素 - ③获取内容
$(selector).html();
获取html内容,有什么返回什么,调用这个方法,首先会清空原来的内容,然后再设置新的内容。
(3)清空元素
$(selector).empty();
清空指定元素的所有子元素,没有参数
$(selector).html(“”)
与 $(selector).remove();
都会把自己(包括所有内部元素)从文档中删除掉
(4)复制元素
(selector).clone();
复制$(selector)
所匹配到的元素,返回值为复制的新元素
推荐使用html(“”)方法来创建元素或者html(“”)清空元素
2、操作form表单
(1)属性操作
①设置属性:
$(selector).attr("title", ''美女");参1:要设置的属性名称,参2:属性值,参2不存在返回属性对应的值
$(selector).prop();
参2不存在返回false,用法和attr 一样,设置input和button的disabled属性,以及checkbox的checked属性 、selected属性,这几种动态改变的属性必须用prop
②获取属性:
$(selector).attr(“title”);参数:要获取的属性的名称,返回要获取的属性对应的值
此时,返回指定属性的值
③移除属性:
$(selector).removeAttr(“title”); 参数为:要移除的属性的名称
④:selected 选择selected中被选中的元素
注意:设置selected、checked、disabled要使用.prop()方法。
(2)值和内容
①val()
方法:
作用:设置或返回表单元素的值,例如:input,select,textarea的值
$(selector).val();
// 获取匹配元素的值,只匹配第一个元素
$(selector).val(“具体值”);
// 设置所有匹配到的元素的值
另外:val()能使select、checkBox、radio相应的选项被选中 val('上海 ');
②text()
方法:
作用:设置或获取匹配元素的文本内容
$(selector).text();
//获取操作不带参数(注意:这时候会把所有匹配到的元素内容拼接为一个字符串)
$(selector).text(“内容”);
//参数表示要设置的文本内容,会清空原有内容
3、尺寸位置操作
(1)高度操作height()
: 作用:设置或获取匹配元素的高度值
$(selector).height(200);//带参数表示设置高度
$(selector).height();//不带参数获取高度
(2)宽度操作width()
: 作用:设置或获取匹配元素的宽度值
(selector).width(200);//带参数表示设置宽度
$(selector).width();//不带参数获取宽度
(3)坐标值操作
①offset()
作用:获取或设置元素相对于文档左上角的位置
$(selector).offset();
// 无参数表示获取,返回值为:{top:num,left:num}
,值是相对于document的位置
$(selector).offset({left:100, top: 150});
// 设置,参数数值类型不带单位,如果没有定位,会设置position:relative,如果有非static,则不会设置,但会把原来的值给覆盖掉
注意:设置offset后,如果元素没有定位(默认值:static),则被修改为relative
②scrollTop()
作用:获取或者设置元素垂直方向滚动的位置
$(selector).scrollTop();// 无参数表示获取偏移
$(selector).scrollTop(100);// 有参数表示设置偏移,参数为数值类型
对scrollTop的理解:
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0
③scrollLeft()
作用:获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);
五.jQuery动画
1、显示动画show()
,隐藏动画hide()
参数一:可以是数值类型或者字符串类型
参数二:动画执行完后立即执行的回调函数
2、滑入滑出动画
(1)滑入动画效果
$(selector).slideDown(speed,callback);
默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)
(2)滑出动画效果,让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);
(3)滑入滑出切换动画效果
$(selector).slideToggle(speed,callback);
3、淡入淡出动画
(1)淡入动画效果
$(selector).fadeIn(speed, callback);
(2) 淡出动画效果
$(selector).fadeOut(1000);
(3)淡入淡出切换动画效果,通过改变不透明度,切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
(4)改变不透明度到某个值
与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的。
作用:调节匹配元素的不透明度
$(selector).fadeTo(1000, .5); 参1:时长,参2:不透明值、 0全透,1全不透
4、自定义动画
注意:所有能够执行动画的属性必须只有一个数字类型的值。
$(selector).animate({params},speed,callback);
作用:执行一组CSS属性的自定义动画
参1:要执行动画的CSS属性(必选)
参2:执行动画时长(可选)
参3:动画执行完后立即执行的回调函数(可选)
5、stop()停止动画
$(selector).stop(clearQueue,jumpToEnd);
参1:是否清空所有的后续动画
参2:是否立即执行完当前正在执行的动画
当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。
如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。
注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。
六.jQuery事件机制
jQuery的事件机制,包括了:事件绑定、事件解绑、事件触发。
事件发展历程:简单事件绑定–>bind()阶段—>delegate()委托阶段—>on()阶段
1、简单事件绑定
click() 单击事件
mouseenter() 鼠标进入事件
mouseleave() 鼠标离开事件
dbclick() 双击事件
change() 改变事件,如:文本框值改变,下拉列表值改变等
focus() 获得焦点事件
blur() 失去焦点事件
keydown() 键盘按下事件
2、on方式
语法:$(selector).on(events,[selector],[data],function());
第一个参数:events,绑定事件的类型
第二个参数:selector, 执行事件的后代元素
第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(一般不用)
第四个参数:function(),事件处理函数
绑定多个事件
$(selector).on(“click mouseenter”, function(){});//表示给$(selector)匹配的元素绑定单击和鼠标进入事件
2、事件解绑 off
off解绑on方式绑定的事件。
$(selector).off(); 解绑匹配元素的所有事件
$(selector).off(“click”); 解绑匹配元素的所有click事件,自身的和动态的。
$(selector).off(“click”,“..”); 参1:要解绑的事件,参2:解绑动态创建的事件。自身绑定的事件还在
3、事件触发
事件触发的时候只会触发当前元素被执行的事件,单击按钮触发div的单击事件
1、$(selector).click();
简单事件触发,触发 click事件
2、trigger()
方法触发事件,触发浏览器的默认行为,$(selector).trigger(“click”);
参数:要触发事件的名称
$("button").on("click",function(){
$("div").trigger("click");
});
3、triggerHandler
触发 事件响应方法,不触发浏览器行为
$(selector).triggerHandler(“focus”);
比如:文本框获得焦点是浏览器的默认行为
4、事件对象
$(function(event){}):
event 事件对象
event.data 传递给事件处理程序的额外数据
event.delegateTarget 代理绑定事件的元素
event.currentTarget 绑定事件的元素,等同于this,this:哪个元素触发的事件,this就指向这个元素
event.target 触发事件的元素,不一定===this
event.pageX 鼠标相对于页面的位置
event.clientX 距离浏览器的位置
event.screenX 相对于电脑屏幕
event.offsetX 相对于定位的父元素,或者body
event.stopPropagation(); 阻止事件冒泡
event.preventDefault(); 阻止浏览器默认行为
event.type 事件类型:click,dbclick…
event.which 鼠标的按键类型:左1 中2 右3
event.keyCode 键盘按键代码
事件执行的顺序:
如果是单击的按钮,首先会触发按钮的简单事件,然后再触发委托事件
阻止事件冒泡:
event.stopPropagation()
阻止事件冒泡
return false;
同时具有阻止冒泡和阻止默认行为的功能------尽量少用
5、链式编程
链式编程代码示例:
$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);
链式编程原理:return this;
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。
end()
; // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的一次状态
delay()
:延迟
6、隐式迭代
设置操作$(“div”).css(“color”, “red”);
获取操作$(“div”).css(“color”); // 返回第一个元素的值
隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,不用我们再进行循环
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。
each方法
大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。如果要对每个元素做不同的处理,这时候就用到了each方法。
作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
$(selector).each(function(index,element){});
参1:当前元素在所有匹配元素中的索引号,参2:当前元素(DOM对象)