jQuery选择器

作者: 常威爆打来福 | 来源:发表于2017-07-13 12:48 被阅读0次

jquery选择器书目录
JQUERY一
jQuser有选择器
选择器
jQuery 基础
jQuery
jQuery选择器
JQuery基础知识
jQuery相关知识
jQuery选择器

一 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>