本节内容:
1、jQuery是什么
2、什么是jQuery对象
3、寻找元素(选择器和筛选器)
4、操作元素(属性、css、文本操作)
一、jQuery是什么?
1、jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
2、jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3、它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
4、jQuery是一个快速的,简洁的javaScript库,
使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二、什么是jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的。
如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
1、jQuery语法
$(selector).action()
jQuery拿到的是一个存放DOM对象的集合,(即使只有一个那也是个集合)
默认会将集合中的每一项执行后面的action操作
$("#test").html()
意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML;
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$.
2、jQuery对象和DOM对象的相互转换
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,
同理DOM对象也不能使用jQuery里的方法.乱使用会报错
三、寻找元素(选择器和筛选器)
1、选择器
2、表单属性选择器
:enabled
:disabled
:checked
:selected
代码示例
3、筛选器
1、过滤筛选器
就是在对标签里面的标签,再一次的选择
("li").eq(2) ("li").first() $("ul li").hasclass("test")
2、查找筛选器(也可以叫导航查找)
代码(详细解释)示例
四、操作元素(属性,css,文档处理)
1、事件
1、控制载入顺序
想要把script标签写在head标签里,就要让script最后载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
(document).ready(function(){}) -----------> (function(){})
2、事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
3、事件委派
让其内的元素拥有共同的属性,及触发的事件
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
事件绑定及委派的代码示例
4、事件切换
hover事件:
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
代码示例
2、属性操作
1、attr方法使用:
代码示例