css2.1和css3选择器javascript
<div class="box" id="box"> <p>1</p> <p>2</p> </div> <p>hello</p> <script src="../jq/jquery-1.12.4.min.js"></script> <script> //jQuery选择器 //css2.1 css3 选择器 //参数必须是字符串格式的选择器 //基础选择器 $("*") $("p") $(".box") $("#box") //高级选择器 $(".box p").html("高级选择器") $(".box p").css("width" , 100);
<input type="button" value="btn1" disabled="disabled"><br> <input type="button" value="btn2"> <script src="../jq/jquery-1.12.4.min.js"></script> <script> //表单对象属性 $("input:disabled").css("background-color","red");//选中被禁用的disabled的input标签 $("input:enabled").css("background-color","skyblue");//选中没有被禁用的, enabled的 $(":input").css("background-color","pink");//选中全部的input标签 $(":text").css("background-color","pink");//只会改变input表单里的type=text的文本框的css样式
筛选选择器css
也叫过滤选择器,jQuery中新增的本身的选择器html
使用方法:在基础选择器后面增长一些筛选的单词,筛选出前面选择器选中内容中的一部分,也可做为高级选择器的一部分java
//筛选选择器 $("p:first").css("background-color","purple"); $("p:last").css("background-color", "purple"); //选择任意位置 $("p:eq(5)").css("background-color", "purple"); //选择大于下标为5的项 $("p:gt(5)").css("background-color", "purple"); //选中 下标 为奇数的项,下标为1,3,5,7的项 $("p:odd").css("background-color", "skyblue"); //选中 下标 为奇数的项,下标为1,3,5,7的项 $("p:odd").css("background-color", "skyblue"); //not 除了这些项,p的样式都是("background-color", "skyblue")的 $("p:not(eq(3))").css("background-color", "skyblue"); $("p:not(.p1)").css("background-color", "skyblue");
$(":first") 第一个 $(":last") 最后一个 $(":eq(index)") 下标为index的项 $(":gt(index)") 大于下标为index的项 $(":lt(index)") 小于下标为index的项 $(":odd") 下标为奇数的项 $(":even") 下标为偶数的项 $(":not(selector)") 去除全部与给定选择器匹配的元素
过滤方法,jQuery中除了用选择器选择元素,jQuery对象内还封装了一些对应的筛选方法jquery
$("p").first()
$("p").last()
$("p").eq(3)
$("p").first().css("background-color", "red"); $("p").eq(4).css("background-color", "skyblue");
原生Js方法:css3
<head> <style> table{ margin: 0 auto; border-collapse: collapse; } td,tr{ width: 70px; height: 40px; } </style> </head> <body> <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <script src="../jq/jquery-1.12.4.min.js"></script> <script> //原生方法 var trs = document.getElementsByTagName("tr"); for(var i = 0;i <trs.length;i ++){ if(i %2 == 0){ trs[i].style.backgroundColor = "pink"; }else{ trs[i].style.backgroundColor = "skyblue"; } } </script>
jQuery方法:code
//jquery 方法 $("tr:even").css("background-color","rgb(245, 197, 231)"); $("tr:odd").css("background-color","rgb(197, 216, 245)")
html()方法,至关于原生Js中的innerHTML属性,用来获取或设置标签内部的内容htm
text()方法,至关于原生Js中的innerText属性,用来获取或设置标签内部文字,仅仅是文字对象
val()方法,至关于Js中的value属性,用来获取或设置表单元素内容ip
jQuery操做标签的属性
attr()方法,用来获取或设置标签的属性值
设置标签的属性值:jQuery对象.attr(name,value);
获取标签属性值:jQuery对象.attr(name);
removeAttr()方法:移除标签的属性
prop()方法,针对selected\checked\disabled等表单元素的属性,这类属性的属性值与属性名相同
获取:$("input").prop("属性名");
设置:$("input").prop("属性名",值);
jQuery操做样式方法
css()方法,用于调用css属性值或者更改css属性值,jQuery对象.css(css样式属性名,想要设置或更改的属性值)
$pic.css("width","400px"); $pic.css("width","400"); $pic.css("width",400); $pic.css("width","+=100"); //有些属性值能够直接写,或者省略px单位,还能够写+=
• css() 方法的第一个参数,复合属性的单一属性写法能够是驼峰命名法,也能够是横线写法。
//复合属性的单一属性写法,能够是横线-写法,也能够是驼峰命名法 console.log("background-color") console.log("backgroundColor")
• 能够给同一个对象同时设置多条 css 属性,将多条属性的属性和属性值写成对象格式,传给 css() 的参数
//设置多条属性,使用对象形式的参数 $pic.css({ "width":200, "height":100, "border":1 })
jQuery操做类名方法
<style> .box{ background-color: pink; width: 100px; height: 100px; } .no{ background-color: white; } .blue{ background-color: skyblue; width: 100px; height: 100px; } </style> <body> <input type="button" value="删除" id="btn1"> <input type="button" value="添加" id="btn2"> <input type="button" value="切换" id="btn3"> <div id="box" class="box"></div> <script src="../jq/jquery-1.12.4.min.js"></script> <script> var $del_btn = $("#btn1"); var $add_btn = $("#btn2"); var $change_btn = $("#btn3"); var $box = $("#box"); //删除类名 removeClass() $del_btn.click(function(){ //$box.removeClass("box")//删除指定类名 $box.removeClass()//不传参数 默认删除全部类名 }) //在jQuery中类名的控制方法,它只会操做指定的类名,不会影响其余类名 // removeClass("box"),在div的标签上,class="box"仍然存在,原有的类名不会影响 //添加类名 addClass() $add_btn.click(function(){ $box.addClass("blue") }) //切换类名 toggleClass() $change_btn.click(function(){ //让元素在一个类名中进行添加和删除的自动切换 $box.toggleClass("blue");//有就删除,没有就添加 }) </script> </body>
这三个方法只操做参数部分的类名,不影响原有的其余类名
// hasClass() consol.console.log($box.hasClass("blue"));//布尔值,true/false $change_btn.click(function(){ // hasClass() //实现切换效果---toggleClass() if ($box.hasClass("blue")) { $box.removeClass("blue"); } else { $box.addClass("blue"); } })