jquery 笔记文档格式.docx
- 文档编号:19945746
- 上传时间:2023-01-12
- 格式:DOCX
- 页数:24
- 大小:49.37KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 笔记