Jquery基础
一、Jquery基础
1.基本操作
事件绑定：
$("#b1").click(function(){
alert("abc");
});
入口函数
$(function(){ });
2.分类
1. 基本选择器
1. 标签选择器（元素选择器）： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器 ：$("#id的属性值") 获得与指定id属性值匹配的元素
3.类选择器： $(".class的属性值") 获得与指定的class属性值匹配的元素
4.并集选择器： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
$(function(){ $("#b1").click(function(){ //属性选择器 $("div").css("backgroundColor","pink"); //id选择器 $("#two").css("backgroundColor","pink"); //类选择器 $(".one").css("backgroundColor","pink"); //并集选择器 $(".one,#two").css("backgroundColor","pink"); }) });
2.层级选择器
1. 后代选择器：$("A B ") 选择A元素内部的所有B元素
2.子选择器：$("A > B") 选择A元素内部的所有B子元素
$(function(){ $("#b1").click(function(){ //子选择器 $("#two > .class1").css("backgroundColor","pink"); //父选择器 $("#two .class1").css("backgroundColor","pink"); }) })
3. 属性选择器
1. 属性名称选择器：$("A[属性名]") 包含指定属性的选择器
2.属性选择器： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3.复合属性选择器：$("A[属性名='值'][]...") 包含多个属性条件的选择器
$(function(){ $("#b1").click(function(){ //属性名称选择器 $("div[id]").css("backgroundColor","pink"); //属性选择器 $("div[id='two']").css("backgroundColor","pink"); //复合属性选择器 $("div[id='two'] [class='class1']").css("backgroundColor","pink"); }) });
4. 过滤选择器
1. 首元素选择器 ： :first 获得选择的元素中的第一个元素
2.尾元素选择器： :last 获得选择的元素中的最后一个元素
3.非元素选择器：:not(selector) 不包括指定内容的元素
4. 偶数选择器：:even 偶数，从 0 开始计数
5.奇数选择器：:odd 奇数，从 0 开始计数
6. 等于索引选择器：:eq(index) 指定索引元素
7. 大于索引选择器 ：:gt(index) 大于指定索引元素
8. 小于索引选择器 ：:lt(index) 小于指定索引元素
9.标题选择器：:header 获得标题（h1~h6）元素，固定写法
$(function(){ $("#b1").click(function(){ //设置偶数的div背景色 $("div:even").css("backgroundColor","pink"); }) })
5. 表单过滤选择器
1. 可用元素选择器 ：:enabled 获得可用元素
2. 不可用元素选择器 ：:disabled 获得不可用元素
3.选中选择器 ：:checked 获得单选/复选框选中的元素
4. 选中选择器：:selected 获得下拉框选中的元素
<script> $(function(){ $("#b1").click(function(){ $("input[type='text']:enabled").val("1111"); }); // $("#b1").click(function(){ // $("input[type='text']:disabled").val("1111"); // }); // // $("#b1").click(function(){ //复选框选中个数 // alert($("input[type]:checked").length); // }); $("#b1").click(function(){ alert($("input[type]:checked").val()); }) //$("#b1").click(function(){ // alert($("#job option:checked").length); // }) }) </script> <body> <input type="button" value="提交" id="b1" /><br /> <input type="text" value="aaa" id="t1" disabled="disabled" /><br /> <input type="text" value="bbb" id="t2" /><br /> <input type="text" value="ccc" id="t3" /><br /> <input type="text" value="ddd" disabled="disabled" /><br /> <br><br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br><br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> </body>
5. DOM操作
1. 内容操作
1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
3. val()： 获取/设置元素的value属性值
<script>
// 获取myinput 的value值
$(function(){
//获取值
// var a = $("#myinput").val();
// alert(a);
//设置值
// $("#myinput").val("lisi");
// 获取mydiv的标签体内容
// var b=$("#mydiv").html();
// alert(b);
alert($("#mydiv").text());
})
// 获取mydiv文本内容
</script>
2. 属性操作
1. 通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attr
<script type="text/javascript"> $(function(){ //获取北京节点的name属性值 //alert($("#bj").attr("name")); //设置北京节点的name属性的值为dabeijing //$("#bj").attr("name","dabj"); //删除北京节点的name属性并检验name属性是否存在 //$("#bj").removeAttr("name"); //获得hobby的的选中状态 alert($("#hobby").prop("checked")); }) </script> </head> <body> <ul> <li id="bj" name="beijing" xxx="yyy">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <input type="checkbox" id="hobby"/> </body>
2. 对class属性操作
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
4. css():
<script type="text/javascript"> $(function(){ $("#b1").click(function(){ //id为one的div的添加class属性并设置为second $("#one").prop("class","second"); }) // $("#b2").click(function(){ //id为one的div的添加class属性并设置为second // $("#one").addClass("second"); // }); // $("#b3").click(function(){ //id为one的移除属性值为second的class属性 // $("#one").removeClass("second"); // }) // $("#b4").click(function(){ //切换 // $("#one").toggleClass("second"); // }) // $("#b1").click(function(){ // alert($("#one").css("backgroundColor")); // }) // $("#b1").click(function(){ // $("#one").css("backgroundColor","green"); // }) }) </script>
3. CRUD操作:
1. append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
<script type="text/javascript"> $(function(){ $("#b1").click(function(){ //将反恐放置到city的后面 //$("#city").append($("#fk")); //$("#fk").appendTo($("#city")); //将反恐放置到city的最前面 $("#city").prepend($("#fk")); //将反恐插入到天津前面 // $("#tj").after($("#fk")); }) }) </script>
