JQuery使用
在head中直接引用JQuery文件
$是JQuery符号,JQuery把所有功能全部封装在一个全局变量JQuery中,而$就是JQuery的别名。JQuery($)本质上是一个函数,因此也是一个对象,$除了直接调用还有其他的属性。
这里说一句,JQuery采用这种方式将他的方法和属性都包装到一个函数中,保护了他的属性和方法对外隐藏,是JS闭包的一种运用。
选择器
选择器是JQuery的核心,其实JQuery的选择器很像CSS的格式
JS的DOM操作 | JQuiery的DOM操作 |
---|---|
document.getElementById(‘idName’) | $(‘#idName’) |
document.getElementsByTagName(‘tagName’) | $(‘tagName’) |
document.getElementsByClassName(‘className’) | $(‘.className’) |
通过$()查询返回的都是JQuery对象,JQuery对象类似数组,他的每个元素应用了DOM节点对象
如果查询的id不存在,返回[], 因此JQuery的选择器不会返回undefined或者null,JQuery的强大之处在于可以按照属性进行查找:
当然你还可以使用正则进行这样的查询:
这个方法适合通过class属性进行查找,且不受包含多个class名称的影响
也可以进行组合查找:
还可以用,隔开进行组合一块选择:
- DOM对象和JQuery对象转化:
DOM对象转换为JQuery对象: $(aDomObject); 这样就可以调用JQuery的API了
JQuery对象转换为DOM对象: JQueryObj.get(index)获得数组中的一个DOM对象
选择器 | 例子 |
---|---|
层级选择器 空格隔开 | $(‘ul p input’) |
子选择器 > 隔开 | $(parent>child) |
过滤器
选择器 | 作用 |
---|---|
:first-child | 选择第一个节点 |
:last-child | 选择最后一个节点 |
:nth-child(n) | 选择第n个节点,N从以开始 |
:nth-child(odd) | 选择序号为奇数的节点元素 |
:nth-child(even) | 选择序数为偶数的节点元素 |
查找和过滤
查找
- 在当前节点的子节点中进行查找,用find()方法,find本身能接受任意一种选择器
- 从当前节点向上查找,用parent()方法
- 对于同一级的节点,用next()和prev()方法
过滤
- filter()方法可以过滤掉不符合选择器的节点,参数可以是一个函数,函数内部的this被绑定为DOM对象而不是JQuery对象
- map()方法把一个JQuery对象包含的若干个DOM节点转化为其他对象
- 如果JQuery对象包含了不止一个DOM节点,first(), last()和slice()方法可以返回一个新的JQuery对象
操作DOM
修改Text和HTML
jQuery对象的text()和html()方法分别获得节点的文本和原始的HTML文本,如果无参调用就是获取,传入参数就变成了设置文本。
由于JQuery对象可以包含多个或者0个DOM对象,所以操作是在一组DOM对象上进行的,同样即使没有DOM对象也不会报错
修改CSS
JQuery的‘批量操作’使得修改CSS很方便,调用JQuery对象的方法css(‘name’, ‘value’),而且支持链式操作
css()方法将作用于DOM节点的style属性,具有高优先级。修改class属性可以采用以下方法:
jQueryObj.hasClass(‘className’); // 判断是否包含
jQueryObj.addClass(‘className’); // 添加class
jQueryObj.removeClass(‘className’); // 删除class
显示和隐藏DOM
隐藏一个DOM可以设置CSS的属性display属性为none,但是显示的时候要知道之前的display属性,而JQuery直接提供了show()和hide()方法,隐藏了修改display的细节
显示和隐藏DOM不改变DOM数的结构
获取DOM信息
通过jQuery对象的若干方法可以直接获得DOM的宽高信息
// 浏览器可视窗口的大小
$(window).width();
$(window).height();
// HTML文档的大小
$(document).width();
$(document).height();
// 某个DIV的大小
var div = $(‘#test-div’);
div.width();
div.height();
div.width(400);
div.height(‘200px’); // 设置CSS属性,是否生效要看CSS是否有效attr()和removeAttr()用于操作DOM节点的属性
1234567// <div id = "test-div" name = "Test" start="1"> ... </div>var div = $('#test-div');div.attr('data'); // undefined 属性不存在div.attr('name'); // 'Test'div.attr('name', 'Hello'); // div的name属性变成了'hello';div.removeAttr('name'); // 删除name属性div.attr('name'); // undefinedprop()跟attr()类似,但是对于那种在节点中没有值,只有出现和不出现的属性例如 checked
123var radio = $('#test-radio');radio.attr('checked'); // 'checked'radio.prop('checked'); // true
不过对于这种属性,用is最好 radio.is(‘:checked’); // true 类似的属性有selected is(‘:selected’)
操作表单
对于表单元素,JQuery对象提供val()方法获取和设置对应的value属性,无参是获取,传入参数是设置
修改DOM结构
添加DOM节点
添加DOM节点除了使用html()这种暴力的方法外,还可以用append()方法,调用append()传入HTML片段(append()是添加子节点在最后)
append()除了接收字符串,还可以传入原始的DOM对象,JQuery对象和函数对象,传入函数时, 要求返回一个字符串,DOM对象或者JQuery对象。因为JQuery对象可能是一组DOM对象,只有传入函数才能针对不同的DOM对象生成不同的子节点
prepend()把DOM添加在最前面
after()和before()方法用于同级节点
删除节点
remove()方法删除jQuery对象包括的所有DOM节点
事件
由于浏览器绑定事件的方法不同,JQuery来写代码就屏蔽了浏览器的差异
on()用来绑定一个事件,传入事件名称和对应的处理函数,也可以直接调用事件方法
a.on(‘click’, function(){alter(‘Hello!’);}); 等价于 a.click(function(){alter(‘Hello!’);});
jQuery 能够绑定的事件如下
- 鼠标事件
click: 鼠标点击时触发;
dbclick: 鼠标双击时触发;
mouseenter: 鼠标进入时触发;
mouseleave: 鼠标移开时触发;
hover: 鼠标进入和移开时触发两个函数,相当于mouseenter加上mouseleave - 键盘事件
键盘事件仅作用于当前焦点的DOM上,通常是<input>和<textarea>
keydown: 键盘按下时触发
keyup: 键盘松开时触发
keypress: 按一次键后触发 - 其他事件
focus: 当DOM获得焦点时触发;
blur: 当DOM失去焦点时触发;
change: 当<input> <textarea> <select> 的内容发生改变时触发;
submit: 当 <form>提交时触发;
ready: 当页面被载入并且DOM树完后才能初始化后触发; 仅作用于document对象
ready事件在DOM完成初始化后触发,且触发一次。适合用来写其他的初始化代码
$(docement).on(‘ready’, function () { … ;}); 等价于 $(document).ready(function (){ … ;}); 等价于 $(function () {});
事件参数
有些事件,如mousemove和keypress, 我们需要获得鼠标的位置和按键的值,这些事件都会传入Event对象作为参数,可以从Event对象上获得更多的信息
取消绑定
通过off(‘click’, function)实现,移除的函数必须跟绑定的函数是同一个,如果是匿名函数就无法移除,可以使用off(‘click’)一次性移除已绑定的click事件的所有处理函数
同理无参调用off()一次性移除已绑定所有类型的事件处理函数
事件触发条件
事件的触发是通过用户操作引起的,如果我们通过JS代码去修改文本框的内容将不会触发change事件;如果希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件: input.val(‘change it’); input.change(); input.change() 相对于 input.trigger(‘change’), 它是trigger()方法的简写
浏览器安全限制
在浏览器中有些JS代码只有在用户的触发下才能执行。例如window.open()函数 在JSdiamante中是不会被执行的,只有通过用户事件进行触发
动画
这里我在工作中用的是Tween一系列的js库,感兴趣的可以关注我之后的文章更新。
这里介绍jQuery内置的几种动画
- show()和hide(),无参调用show()和hide()会显示和隐藏DOM元素,但是,传入一个时间参数,就变成了动画。如 show(3000); // 在3秒内逐渐显示
时间以ms为单位,但也可以是’slow’(0.6) ‘fast’这些字符串 show()和hide()是从左上角逐渐展开或者收缩的 - toggle()方法根据当前状态决定是show()还是hide()
- slideUp()和slideDown()在垂直方向上逐渐展开或者收缩的
slideUp()把一个DOM元素收起来,slideDown()相反,而slideToggle()是根据元素是否可见进行下一步操作的 - fadeIn()和fadeOut()的动画效果是淡入淡出,也就是通过不断地设置DOM元素的opacity属性来实现的 fadeToggle()根据当前状态决定下一步操作
自定义动画
animate()可以实现任意动画效果,需要传入的参数就是DOM元素的最终CSS状态和时间123456var div = $('#test-div');div.animate({opacity: 0.25;width: '256px';height: '256px';}, 3000);
animate()还可以接受第三个参数,参数是一个回调函数,当动画结束时这个动画被调用
串行动画
jQuery的动画可以串行执行,通过delay()方法还可以实现暂停, 这样我们可以实现复杂的动画效果
动画执行需要时间所以JQuery不断地返回新的Promise对象才能执行后续操作。
其他问题
有时候动画没有效果, 是因为你执行动画的那个DOM元素不是块级元素可能有些属性没有。
此外JQuery也没有实现background-color的动画效果,可以通过CSS3的transition实现动画效果。