一 css选择器回顾
CSS选择器
二 jQuery基本选择器
jQuery选择器
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数与js的不同</title>
<style>
/* li{
color: red;
font-size: 18px;
}*/
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//1. 设置选中标签的css样式
// $("#li3").css("background","red");
//2. 获取选中标签的样式
//var bg=$("#li3").css("color");
//var bg=$("#li3").css("font-size");
//alert(bg);
//3. 标签选择器
//$("li").css("background","red");
//4. 选择多个指定元素
$(".ll,div").css("background","green")
})
</script>
</head>
<body>
<ul>
<li class="ll">1111111</li>
<li>2222222</li>
<li class="li3">3333333</li>
<li>4444444</li>
<li class="ll">5555555</li>
<li>6666666</li>
</ul>
<div>
对方水电费
</div>
</body>
</html>
规律：$(selector).css(“background”,”red”);
Console.log();在控制台打印
alert();弹窗打印
三 css的详细用法
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函数与js的不同</title>
<style>
/* li{
color: red;
font-size: 18px;
}*/
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
/* //css
//1 获取 .css("background-color")
$("li").css("font-size");
//2 设置样式
$("li").css("background-color","red");
//3 设置多个样式
$("li").css({
"background-color":"red",
"font-size":"30px",
"color":"green"
})*/
//4 设置样式，可以根据我们自己的意愿设置
$("li").css("background",function (index,value) {
//index;指定当前元素的索引号
//value;表示当前元素的要设置的样式，此处指：background-color
/* alert(index);
alert(value);*/
// return (index + 1) * 10 + "px";
switch(index){
case 0: return "red";break;
case 1: return "green";break;
case 2: return "blue";break;
}
})
})
</script>
</head>
<body>
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
</body>
</html>
总结：
1 获取选中标签样式
.css("background-color")
2 设置样式
$("li").css("background-color","red");
3 设置多个样式
$("li").css({
"background-color":"red",
"font-size":"30px",
"color":"green"
})
4 设置样式，可以根据我们自己的意愿设置
$("li").css("background",function (index,value) {
//index;指定当前元素的索引号
//value;表示当前元素的要设置的样式，此处指：background-color
/* alert(index);
alert(value);*/
// return (index + 1) * 10 + "px";
switch(index){
case 0: return "red";break;
case 1: return "green";break;
case 2: return "blue";break;
}
})
})
四 jQuery是什么
jQuery就是js的一个库，把我们常用的一些功能进行了封装，方便我们调用，提高我们开发效率。
五 js和jQuery的区别
js是一门编程语言，我们用它编写客户端浏览器脚本。
jQuery是js的一个库，包含多个可重用的函数，用来辅助我们简化js开发。
jQuery可以做到的js都可以做到，而js能做到的，jQuery不一定能做到。
六 jQuery其他选择器
1 层级选择器
层级选择器
层级选择器选择了选择符 后面那个元素，比如，div > p，是选择>后面的p元素。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// documen 是不被引号包裹的
//$("li").css("font-size","30px");
// 后代选择器
//$(".wrap li").css("background","red");
// 子代选择器
//$(".wrap > ul > li").css("font-size","30px");
// 紧邻选择器
//$(".wrap + div").css("font-size","30px");
// 兄弟选择器
$(".liItem ~ li").css("font-size","40px");
});
// jQuery的第二种入口函数
/*$(function () {});*/
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>姐妹很多01
<p>
<ul>
<li>孩子很多</li>
<li>孩子很多</li>
<li>孩子很多</li>
</ul>
</p>
</li>
<li>姐妹很多02</li>
<li>姐妹很多03</li>
<li class="liItem">姐妹很多04</li>
<li>姐妹很多05</li>
<li>姐妹很多06</li>
<li>姐妹很多07</li>
<li>姐妹很多08</li>
<li>姐妹很多09</li>
<li>姐妹很多10</li>
</ul>
</div>
<p>我是p元素</p>
<div>
我是第一个div后面的兄弟div
</div>
<div>
我是第er个div后面的兄弟div
</div>
</body>
</html>
2 过滤选择器
基本过滤选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// :odd
//$("li:odd").css("background","red");
// :even
//$("li:even").css("background","green");
// :eq(index)
//$("ul li:eq(4)").css("font-size","30px");
// :lt(index)
//$("li:lt(6)").css("font-size","30px");
// :gt(index)
//$(".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>
3 属性选择器
属性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.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*='it']").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://web.itcast.cn" title="我是title的内容">前端移动</a>
<a href="http://sina.com.cn">新浪</a>
<a>我没有href</a>
</div>
</body>
</html>
4 筛选选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.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>
