jquery 笔记文档格式.docx
《jquery 笔记文档格式.docx》由会员分享，可在线阅读，更多相关《jquery 笔记文档格式.docx（24页珍藏版）》请在冰豆网上搜索。
text/javascript"
src="
jquery-1.7.2.js"
>
/script>
/*$（function（）{
//1.使用id选择器选择id=btn1的元素:
#btn1"
）
//2.为选择的jQuery对象添加onclick响应函数:
//$（"
）.click（function（）{}）,响应函数的代码
//写在function（）{}的中括号中.
$（"
$（"
#one"
）.css（"
background"
"
#ffbbaa"
}）;
#btn2"
.mini"
#btn3"
div"
#btn4"
*"
#btn5"
span,#two"
}）
*/
3.层次选择器:
inputtype="
value="
选择body内的所有div元素"
id="
btn1"
/>
在body内,选择子元素是div的."
btn2"
选择id为one的下一个div元素"
btn3"
选择id为two的元素后面的所有div兄弟元素"
btn4"
选择id为two的元素所有div兄弟元素"
btn5"
选择id为one的下一个span元素"
btn6"
选择id为two的元素前边的所有的div兄弟元素"
btn7"
$（function（）{
bodydiv"
body>
div"
#one+div"
#two~div"
#two"
）.siblings（"
#btn6"
//以下选择器选择的是近邻#one的span元素,若该span
//和#one不相邻,选择器无效.
//$（"
#one+span"
）.nextAll（"
span:
first"
#btn7"
）.prevAll（"
4.基本过滤选择器:
选择第一个div元素"
选择最后一个div元素"
选择class不为one的所有div元素"
选择索引值为偶数的div元素"
选择索引值为奇数的div元素"
选择索引值为大于3的div元素"
选择索引值为等于3的div元素"
选择索引值为小于3的div元素"
btn8"
选择所有的标题元素"
btn9"
选择当前正在执行动画的所有元素"
btn10"
选择id为two的下一个span元素"
btn11"
代码实现:
$（document）.ready（function（）{
functionanmateIt（）{
#mover"
）.slideToggle（"
slow"
anmateIt）;
}
anmateIt（）;
div:
last"
not（.one）"
even"
odd"
gt（3）"
eq（3）"
#btn8"
lt（3）"
#btn9"
:
header"
#btn10"
animated"
#btn11"
}）;
5.内容过滤选择器:
$（document）.ready（function（）{
contains（'
di'
）"
empty"
has（.mini）"
parent"
not（:
empty）"
<
/head>
body>
选择含有文本'
的div元素"
选择不包含子元素（或者文本元素）的div空元素"
选择含有class为mini元素的div元素"
选择含有子元素（或者文本元素）的div元素"
br>
6.可见于不可见选择器：
选取所有可见的div元素"
选择所有不可见的div元素"
选择所有不可见的input元素"
visible"
//alert（$（"
hidden"
）.length）;
//show（time）:
可以使不可见的元素变为可见,time表示时间,以
//毫秒为单位
//jQuery的很多方法支持方法的连缀,即一个方法的返回值来时调用该
//方法的jQuery对象:
可以继续调用该对象的其他方法.
）.show（2000）.css（"
"
//val（）方法可以返回某一个表单元素的value属性值.
alert（$（"
input:
）.val（））;
7.属性过滤选择器：
选取含有属性title的div元素."
选取属性title值等于'
test'
的div元素."
选取属性title值不等于'
的div元素（没有属性title的也将被选中）."
选取属性title值以'
te'
开始的div元素."
est'
结束的div元素."
选取属性title值含有'
es'
组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有'
的div元素."
选取含有title属性值,且title属性值不等于test的div元素."
$（"
div[title]"
div[title='
]"
//选取的元素中包含没有title的div元素.
div[title!
='
div[title^='
div[title$='
div[title*='
div[id][title*='
div[title][title!
8.子元素选择器：
代码实现：
//选取子元素,需要在选择器前添加一个空格.
div.one:
nth-child
（2）"
first-child"
last-child"
only-child"
选取每个class为one的div父元素下的第2个子元素."
选取每个class为one的div父元素下的第一个子元素."
选取每个class为one的div父元素下的最后一个子元素."
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素."
9.表单元素过滤选择器：
代码实现：
//使所有的可用的单行文本框的value值变为尚硅谷
text:
enabled"
）.val（"
尚硅谷"
disabled"
"
varnum=
$（"
checkbox[name='
newsletter'
]:
checked"
）.length;
alert（num）;
//实际被选择的不是select,而是select的option子节点
//所以要加一个空格.
//varlen=$（"
select:
selected"
）.length
//alert（len）;
//因为$（"
）选择的是一个数组
//当该数组中有多个元素时,通过.val（）方法就只能获取第一个被选择的值了.
//jQuery对象遍历的方式使each,在each内部的this是正在
//得到的DOM对象,而不是一个jQuery对象
）.each（function（）{
alert（this.value）;
}）;
}）
h3>
表单对象属性过滤选择器<
/h3>
buttonid="
对表单内可用input赋值操作.<
/button>
对表单内不可用input赋值操作.<
br/>
获取多选框选中的个数.<
获取多选框选中的内容.<
获取下拉框选中的内容.<
10.节点的插入
//测试使用jQuery操作文本节点,属性节点.
//及查找元素节点
//1.操作文本节点:
通过jQuery对象的text（）方法
alert（$（"
#bj"
）.text（））;
）.text（"
text[name='
use
升级会员 