前提:jQuery是一套跨浏览器,多功能,可扩展的JavaScript库。jQuery受欢迎主要是因为有一下这些特色:
- (1)强大的兼容处理,消除了浏览器之间的差异
- (2)简洁的链式语法,结合函数式编程技巧就能用少量的代码完成一系列的功能
- (3)元素操作法多样化,可对文档中的元素进行查找,读写属性,控制样式,注册事件等操作
- (4)可以快速实现Ajax,动画,浏览器嗅探,函数式编程等功能
- (5)良好的扩展性,吸引了很多开发者为其设计插件
jQuery是如何获取元素的呢?
jQuery如何获取页面元素?
$("#test"):获取id为test的元素集
$(".red"):获取class为red的元素集
jQuery的链式调用
jQuery对象中的方法会尽可能返回对象本身,因此可实现简洁的链式调用,举个栗子:先找到id属性为“btn”的目标元素(即要匹配的元素),再为其父元素添加一个CSS类,最后返回该父元素中的HTML内容
$("#btn".parent().addClass("container").html();
jQuery对元素的操作
在jQuery中,可以用很简单的方式创建一个或多个元素(通过调用$()函数来实现),其他诸如插入,查找,删除和复制等操作,也很容易实现。
1:查找方法:
传递CSS选择器字符串给()能够兼容所有浏览器,并且还扩展了已有的选择器,例如引入了:button,:checkbox等独有的表单选择器,返回的jQuery对象比Nodelist也强大很多
| 选择器 | 描述 | 选择器 | 描述 |
|---|---|---|---|
| :button | 匹配按钮元素 | :image | 匹配图像元素 |
| :checkbox | 匹配复选框元素 | :text | 匹配文本框元素 |
| :radio | 匹配单选框元素 | :selected | 匹配选择框中选中的选项元素 |
| :file | 匹配上传按钮元素 |
2:插入方法
jQuery提供了多个方法在某个位置插入指定的内容。 jQuery对象中的append()方法可将指定的内容插入到目标元素的子元素列表的末尾处,另一个appendTo()方法也能实现相同的插入操作,只是采用的方式不同,如下面的代码,append()中的目标元素在前,要插入的元素灾后,可称其为前置方式。而appendTo()中的目标元素在后,要插入的的内容在前,可称其为后置方式。
$("#target").append("<p>插入的内容</p>");
$("<p>插入的内容</p>").appendTo("#target")
1:修改元素
创建元素直接用jQuery构造函数就行了
$('<h1>Hello</h1>')
元素的属性
通过jQuery对象不但能够改变文档的结构,还能获取和设置元素的属性,特性,尺寸,坐标,样式,关联的数据以及表单中空间的值。