jquery 笔记.docx
- 文档编号:6924255
- 上传时间:2023-01-12
- 格式:DOCX
- 页数:24
- 大小:49.37KB
jquery 笔记.docx
《jquery 笔记.docx》由会员分享,可在线阅读,更多相关《jquery 笔记.docx(24页珍藏版)》请在冰豆网上搜索。
jquery笔记
Jquery笔记
1.helloworld:
$(function(){
$("button").click(function(){
alert("helloworld");
});
})
2.基本选择器:
•改变id为one的元素的背景色为#bbffaa
•改变class为mini的所有元素的背景色为#bbffaa
•改变元素名为
•改变所有元素的背景色为#bbffaa
•改变所有的元素和id为two的元素的背景色为#bbffaa
--导入jQuery库-->
/*$(function(){
//1.使用id选择器选择id=btn1的元素:
$("#btn1")
//2.为选择的jQuery对象添加onclick响应函数:
//$("#btn1").click(function(){}),响应函数的代码
//写在function(){}的中括号中.
$("#btn1").click(function(){
$("#one").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$(".mini").css("background","#ffbbaa");
});
$("#btn3").click(function(){
$("div").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("*").css("background","#ffbbaa");
});
$("#btn5").click(function(){
$("span,#two").css("background","#ffbbaa");
});
})
*/
3.层次选择器:
$(function(){
$("#btn1").click(function(){
$("bodydiv").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$("body>div").css("background","#ffbbaa");
});
$("#btn3").click(function(){
$("#one+div").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("#two~div").css("background","#ffbbaa");
});
$("#btn5").click(function(){
$("#two").siblings("div").css("background","#ffbbaa");
});
$("#btn6").click(function(){
//以下选择器选择的是近邻#one的span元素,若该span
//和#one不相邻,选择器无效.
//$("#one+span").css("background","#ffbbaa");
$("#one").nextAll("span:
first").css("background","#ffbbaa");
});
$("#btn7").click(function(){
$("#two").prevAll("div").css("background","#ffbbaa");
});
})
4.基本过滤选择器:
代码实现:
$(document).ready(function(){
functionanmateIt(){
$("#mover").slideToggle("slow",anmateIt);
}
anmateIt();
$("#btn1").click(function(){
$("div:
first").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$("div:
last").css("background","#ffbbaa");
});
$("#btn3").click(function(){
$("div:
not(.one)").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("div:
even").css("background","#ffbbaa");
});
$("#btn5").click(function(){
$("div:
odd").css("background","#ffbbaa");
});
$("#btn6").click(function(){
$("div:
gt(3)").css("background","#ffbbaa");
});
$("#btn7").click(function(){
$("div:
eq(3)").css("background","#ffbbaa");
});
$("#btn8").click(function(){
$("div:
lt(3)").css("background","#ffbbaa");
});
$("#btn9").click(function(){
$(":
header").css("background","#ffbbaa");
});
$("#btn10").click(function(){
$(":
animated").css("background","#ffbbaa");
});
$("#btn11").click(function(){
$("#two").nextAll("span:
first").css("background","#ffbbaa");
});
});
5.内容过滤选择器:
$(document).ready(function(){
$("#btn1").click(function(){
$("div:
contains('di')").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$("div:
empty").css("background","#ffbbaa");
});
$("#btn3").click(function(){
$("div:
has(.mini)").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("div:
parent").css("background","#ffbbaa");
//$("div:
not(:
empty)").css("background","#ffbbaa");
});
});
6.可见于不可见选择器:
$(document).ready(function(){
$("#btn1").click(function(){
$("div:
visible").css("background","#ffbbaa");
});
$("#btn2").click(function(){
//alert($("div:
hidden").length);
//show(time):
可以使不可见的元素变为可见,time表示时间,以
//毫秒为单位
//jQuery的很多方法支持方法的连缀,即一个方法的返回值来时调用该
//方法的jQuery对象:
可以继续调用该对象的其他方法.
$("div:
hidden").show(2000).css("background",
"#ffbbaa");
});
$("#btn3").click(function(){
//val()方法可以返回某一个表单元素的value属性值.
alert($("input:
hidden").val());
});
7.属性过滤选择器:
$("#btn1").click(function(){
$("div[title]").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$("div[title='test']").css("background","#ffbbaa");
});
$("#btn3").click(function(){
//选取的元素中包含没有title的div元素.
$("div[title!
='test']").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("div[title^='te']").css("background","#ffbbaa");
});
$("#btn5").click(function(){
$("div[title$='est']").css("background","#ffbbaa");
});
$("#btn6").click(function(){
$("div[title*='es']").css("background","#ffbbaa");
});
$("#btn7").click(function(){
$("div[id][title*='es']").css("background","#ffbbaa");
});
$("#btn8").click(function(){
$("div[title][title!
='test']").css("background","#ffbbaa");
});
8.子元素选择器:
代码实现:
$(document).ready(function(){
$("#btn1").click(function(){
//选取子元素,需要在选择器前添加一个空格.
$("div.one:
nth-child
(2)").css("background","#ffbbaa");
});
$("#btn2").click(function(){
$("div.one:
first-child").css("background","#ffbbaa");
});
$("#btn3").click(function(){
$("div.one:
last-child").css("background","#ffbbaa");
});
$("#btn4").click(function(){
$("div.one:
only-child").css("background","#ffbbaa");
});
});
9.表单元素过滤选择器:
代码实现:
$(function(){
$("#btn1").click(function(){
//使所有的可用的单行文本框的value值变为尚硅谷
alert($(":
text:
enabled").val());
$(":
text:
enabled").val("尚硅谷");
});
$("#btn2").click(function(){
$(":
text:
disabled").val("");
});
$("#btn3").click(function(){
varnum=
$(":
checkbox[name='newsletter']:
checked").length;
alert(num);
});
$("#btn5").click(function(){
//实际被选择的不是select,而是select的option子节点
//所以要加一个空格.
//varlen=$("select:
selected").length
//alert(len);
//因为$("select:
selected")选择的是一个数组
//当该数组中有多个元素时,通过.val()方法就只能获取第一个被选择的值了.
//alert($("select:
selected").val());
//jQuery对象遍历的方式使each,在each内部的this是正在
//得到的DOM对象,而不是一个jQuery对象
$("select:
selected").each(function(){
alert(this.value);
});
});
$("#btn4").click(function(){
$(":
checkbox[name='newsletter']:
checked").each(function(){
alert(this.value);
});
});
})
表单对象属性过滤选择器
10.节点的插入
//测试使用jQuery操作文本节点,属性节点.
//及查找元素节点
$(function(){
//1.操作文本节点:
通过jQuery对象的text()方法
alert($("#bj").text());
$("#bj").text("尚硅谷");
alert($(":
text[name='use
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)