0.jQuery选择器
2024-08-28 09:01:48
左边的是jQuery用法 右边是js用法
$("tag") == document.getElementsByTagName("tag");
$(".class") == document.getElementsByClassName("class");
$("#id") == document.getElementById("id");
$("sb").css("background","red") == sb.style.background = "red";
var bg = $("sb").css("background-color");console.log(bg);//输出rgb(255,0,0)//红色\
$("sb").css({"background":"red","font-size":"14px"})
$("#id>.class>tag") $(".class tag") $(li.class) $(".f1+.fr")在css里的方法这里也可以用
过滤选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过滤选择器</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
//从0开始数
// :odd奇数行
//$("li:odd").css("background","red"); // :even偶数行
//$("li:even").css("background","green"); // :eq(index)指定行
//$("ul li:eq(4)").css("font-size","30px"); // :lt(index)小于6的
//$("li:lt(6)").css("font-size","30px"); // :gt(index)大于7的
//$(".ulList1 li:gt(7)").css("font-size","40px"); // :first第一个
//$(".ulList li:first").css("font-size","40px"); // :last最后一个
//$("li:last").css("font-size","40px");
});
</script>
</head>
<body>
<ul class="ulList">
<li>01男嘉宾</li>
<li>02男嘉宾</li>
<li>03男嘉宾</li>
<li>04男嘉宾</li>
<li>05男嘉宾</li>
<li>06男嘉宾</li>
<li>07男嘉宾</li>
<li>08男嘉宾</li>
<li>09男嘉宾</li>
<li>10男嘉宾</li>
</ul>
<ul class="ulList">
<li>01男嘉宾</li>
<li>02男嘉宾</li>
<li>03男嘉宾</li>
<li>04男嘉宾</li>
<li>05男嘉宾</li>
<li>06男嘉宾</li>
<li>07男嘉宾</li>
<li>08男嘉宾</li>
<li>09男嘉宾</li>
<li>10男嘉宾</li>
</ul>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
// 属性选择器
/*$("a[href]").css("color","red");*/ // [attr=value]
//$("a[href='http://web.itcast.cn']").css("font-size","40px"); // [attr!=value]
//$("a[href!='http://www.baidu.com']").css("font-size","40px"); // [attr^=value]开头
//$("a[href^='http']").css("font-size","40px"); // [attr$=value]结尾
//$("a[href$='cn']").css("font-size","40px"); // [attr*=value]通配符
//$("a[href*='sina']").css("font-size","40px"); // [attr][attr] 都满足 交集
$("a[href][title*='的']").css("font-size","40px");
});
</script>
</head>
<body>
<div class="divItem">
<a href="www.baidu.com" title="谁啊？">百度</a>
<a href="http://www.taobao.com" title="我是title的内容">淘宝网</a>
<a href="http://sina.com.cn">新浪</a>
<a>我没有href</a>
</div>
</body>
</html>
筛选选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
// .eq()
// 类比 ":eq(index)" 选择器
//$("span").eq(1).css("font-size","40px"); // .first()
// 类比 ":first" 选择器
//$("span").first().css("font-size", "40px"); // .parent()
// 选择父亲元素
//$("#sp").parent().css("background", "gold"); //$("p").parent("#div").css("background", "gold"); // .siblings()
// 选择所有的兄弟元素
//$("#li04").siblings(".liItem").css("background", "gold"); // .find()
// 查找所有后代元素
$("div").find("#li04").css("background", "gold");
});
</script>
</head>
<body>
<div>
<span>我是第1个span</span>
<span id="sp">我是第2个span</span>
<span>我是第3个span</span>
</div> <div id="div">
<p>Hello</p>
</div>
<div class="selected">
<p>Hello Again</p>
</div> <div>
<ul>
<li>我是li01</li>
<li>我是li02</li>
<li>我是li03</li>
<li id="li04">我是li04</li>
<li>我是li05</li>
<li class="liItem">我是li06</li>
<li>我是li07</li>
<li>我是li08</li>
</ul>
</div>
</body>
</html>
最新文章
- 保护ASP.NET 应用免受 CSRF 攻击
- Ubuntu install JDK适合像我的小白
- Mac如何删除MySQL,Mac下MySQL卸载方法
- Ubuntu之Mysql安装及基本设置
- spring security使用数据库资源
- MIB-II
- Android EditText 不弹出输入法
- 惊曝6.24AppCan移动开发大会参展名录，现场礼品超多！
- OC 加密
- this在JavaScript中的工作范围
- 在Unity中高效工作（下）
- C#使用 SQLite 数据库 开发的配置过程及基本操作类，实例程序：工商银行贵金属行情查看小工具
- mongodb 备份与恢复
- 精通 VC++ 实效编程280例 - 01 窗口
- [深圳/广州]微软SQL技术沙龙分享会（MVP)
- 逆向实战干货,快速定位自动捡阳光Call,或者标志
- C库源码中的移位函数
- Eclipse查看JDK源码（非常详细）
- 查看CentOS版本
- GoLand、Pycharm注册码