jQuery选择器及操作类名方法
发布日期：2021-05-07 03:16:30
浏览次数：20
分类：原创文章
本文共 6518 字，大约阅读时间需要 21 分钟。
jQuery选择器
-
css2.1和css3选择器
- 参数：必须是字符串格式的选择器
<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样式-
筛选选择器
-
也叫过滤选择器，jQuery中新增的自己的选择器
使用方法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器选中内容中的一部分，也可作为高级选择器的一部分
-
//筛选选择器$("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对象内还封装了一些对应的筛选方法
-
常用：
$("p").first()$("p").last()$("p").eq(3)
$("p").first().css("background-color", "red");$("p").eq(4).css("background-color", "skyblue");案例 表格隔行变色
原生Js方法:
<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方法:
//jquery 方法$("tr:even").css("background-color","rgb(245, 197, 231)");$("tr:odd").css("background-color","rgb(197, 216, 245)")jQuery应用
jQuery操作标签的内容
-
html()方法,相当于原生Js中的innerHTML属性,用来获取或设置标签内部的内容
-
text()方法,相当于原生Js中的innerText属性,用来获取或设置标签内部文字,仅仅是文字
-
val()方法,相当于Js中的value属性,用来获取或设置表单元素内容
-
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样式属性名,想要设置或更改的属性值)
- 注意
• 一个参数：表示调用 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操作类名方法
- addClass()添加类名
- removeClass()移除类名,不传参数的话,表示删除所有的类名
- toggleClass()类名切换:若这个类名存在,则移除这个类名,否则添加这个类名
<style> .box{ background-color: pink; width: 100px; height: 100px; } .no{ background-color: white; } .blue{ background-color: skyblue; width: 100px; height: 100px; } </style> </head><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()检测类名是否存在,返回值是布尔值
// 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"); }})发表评论
最新留言
做的很好，不错不错
[***.243.131.199]2025年03月22日 11时25分34秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
程序员视角：鹿晗公布恋情是如何把微博搞炸的？
2021-05-09
【JavaScript】动态原型模式创建对象 ||为何不能用字面量创建原型对象?
2021-05-09
Linux应用-线程操作
2021-05-09
多态体验，和探索爷爷类指针的多态性
2021-05-09
系统编程-进程间通信-无名管道
2021-05-09
记2020年初对SimpleGUI源码的阅读成果
2021-05-09
C语言实现面向对象方法学的GLib、GObject-初体验
2021-05-09
系统编程-进程-ps命令、进程调度、优先级翻转、进程状态
2021-05-09
为什么我觉得需要熟悉vim使用，难道仅仅是为了耍酷？
2021-05-09
一个支持高网络吞吐量、基于机器性能评分的TCP负载均衡器gobalan
2021-05-09
HDOJ2017_字符串统计
2021-05-09
高等软工第二次作业《需求分析阶段总结》
2021-05-09
404 Note Found 团队会议纪要
2021-05-09
CentOS安装Docker-ce并配置国内镜像
2021-05-09
使用JWT作为Spring Security OAuth2的token存储
2021-05-09
使用Redis作为Spring Security OAuth2的token存储
2021-05-09
【SOLVED】Linux使用sudo到出现输入密码提示延迟时间长
2021-05-09
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 459581293 位访客
访问时间: 2025-04-19 21:15:58
访问IP: 18.219.179.32
Copyright © 2020 - 2025 css8.cn 京ICP备2021015314号-1
手机版