此篇是续上一篇的jQuery01之后的继续学习。
三、jQuery之——属性选择器
jQuery除了支持css的所有选择器，还支持一些独有的选择器。有基本选择器、层次选择器、过滤选择器、等等
基本选择器：$（“#id”）根据id来匹配元素
$（.class）根据给定的类名匹配元素
$（“element”）根据给定的元素名匹配元素
$（“*”）匹配所有元素
$（“selector1，selector2”）根据每个选择器匹配的元素合并并返回
下面举个例子，图左边为jQuery控制代码，图右为运行效果。
层次选择器：
后代选择器：$（“ul li”）选择ul元素中所有li元素
子选择器：$（"ul>li"）选择<ul>元素中所有的直接<li>子元素
相邻兄弟选择器：$（"h1+p"）选择<h1>元素后面紧跟的<p>兄弟元素
一般兄弟选择器：$（“h1~p”）选择<h1>元素后面的所有兄弟元素，并过滤掉<p>元素
过滤选择器：
基本筛选过滤器
内容筛选过滤器
可见性筛选过滤器
子元素筛选过滤器
$（“.xdk:first”）选取所有class值为“xdk”中的第一个元素
$(document).ready(function(){...}) 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续function内的代码
$（“.xdk:last”）选取所有class值为“xdk”中的最后一个元素
$（"li:eq(1)"）在所有<li>元素中，选取其索引值为1的元素，索引值从0开始
$（“:header”）选取整个网页中所有的<h1>，<h2>等标题元素
$（“div:animated”）选取正在执行动画的<div>元素
$（"div:contains('mylove')"）选取含有文本“mylove”的<div>元素
$（“div:empty”）选取不包含子元素或文本元素的<div>元素
$（“div:parent”）选取含有子元素或文本元素的<div>元素
表单选择器：$（“#form:input”）选取id值为form的元素下的所有<input>、<textarea>，<selcet>，<button>元素
$（":text"）选取所有的单行文本框
$（“:checkbox”）选取所有的复选框
......类似推下去
四、jQuery之——操作DOM
1、获取id值为“id”的元素节点 var selector = $（"#id"）；
2、创建元素节点 $() 下面举个实例。
3、删除元素节点 remove（）移除某行； empty（）全部清空
4、插入元素节点 append（） appendTo（content）添加到匹配的content元素节点中
元素的样式操作：
1、addClass（）方法——为每个匹配的元素添加指定的类名
2、removeClass（）方法——从所有匹配的元素中删除全部或者指定的类
3、toggleClass（）方法——如果存在（不存在）就删除（就添加）一个类
文本节点的操作：
1、html（）方法是重置HTML内容，而append（）方法是追加HTML内容
2、执行text（）方法是获取匹配元素的文本内容
3、val（）方法是获取或设置表单元素的值
遍历元素节点：
1、find（）找到所有和指定表达式匹配的元素 如$（“div”）find（"i"） 找到div标签中的i元素
2、next（）取得一个包含匹配的元素集合中每个元素紧邻的后一个同辈元素的元素集合 如$（“p”）.next（） 取到和p元素同级的下一个元素
3、sibilings（）取得一个包含匹配的元素集合中每个元素的所有唯一同级元素的元素集合
4、parent（）取得一个包含匹配所有元素的唯一父元素的元素集合 如$（“i”）.praent（） 取到所有i元素的上级元素的集合
5、prev（）取得一个包含匹配的元素集合中每个元素紧邻的前一个同级元素的元素集合
注意：jQuery对象和DOM对象不是同一个对象，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。当使用jQuery对象时，需要用到DOM对象的某个方法而jQuery对象没有提供对应封装的方法，就必须进行转换。
jQuery对象转换为DOM对象举例：
jQuery转DOM
DOM对象转换为jQuery对象举例：
DOM转jQueryjQuery把ajax封装的极为简洁，不需要兼容，不需要重复代码，基于配置实现ajax技术，jQuery的ajax使用举例：
jQuery的ajax
网友评论