前端基础之jQuery

JavaScript回顾:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function () {
            var eles=document.getElementsByClassName("item");
            for (var i=0;i<eles.length;i++){
                eles[i].onclick=function (event) {
                    alert(123);
                }
            }
        }
    </script>
</head>
<body>

<div>
    <div class="item btn">菜单一</div>
    <div class="item">菜单二</div>
    <div class="item">菜单三</div>
</div>

</body>
</html>
onclick点击事件

作用域链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function bar(age) {
            console.log(age); //age=function
            var age = 99;
            var sex='male';
            console.log(age);

            function age() {
                alert(123);
            }

            console.log(age);
            return 100;
        }

        result=bar(5);
    </script>
</head>
<body>

</body>
</html>
作用域链
输出:
function age() {
                alert(123);
            }

99
99

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>PPPPPPP</p>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $("p").css("color","red");
        console.log($("p")[0].innerText); //innerText是DOM对象的属性
        var ele=document.getElementById("id"); //通过id去找
        var $ele=$("p");    //jQuery对象
    </script>
</body>
</html>
jQuery对象

输出 PPPPPPP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<p>p</p>
<p id="p2">pp</p>
<p class="p3">ppp</p>

<div>DIV</div>
<div class="outer">
    <p>PPP</p>
    <div class="inner">
        <p>PPPPPP</p>
    </div>
    <p>PPPPPPPPPPPPPPPPPPP</p>
</div>
<a href="">click</a>
<p>bingabcd</p>

<script src="jquery-3.2.1.js"></script>

<script>
    //基本选择器
    $("*").css("color","red");  //所有标签的值都变成红色  $("*")
    $("#p2,.p3").css("color","red"); //指定id的标签的值变成红色 $("#id")
    $(".outer,.inner").css("color","red");  //$(".class")
//     层级选择器
    $(".outer p").css("color","red");   //后代选择器
    $(".outer>p").css("color","red");   //子代选择器
    $(".outer+p").css("color","red");   //毗邻兄弟选择器
    $(".outer~p").css("color","red");   //普通兄弟选择器

</script>
</body>
</html>
jQuery基本选择器和层级选择器

jQuery筛选器，属性选择器，表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<body>

<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
</ul>

<div alex="sb">ALEX</div>
<div alex="sbb">ALEX</div>

<input type="text" value="123">
<input type="password" value="123">
<script src="jquery-3.2.1.js"></script>

<script>
    //JavaScript for循环遍历
    var eles=document.getElementsByClassName("item");
    for (var i=0;i<eles.length;i++){
        eles[i].style.color="red";
    }

    //筛选器
    $("ul .item").css("color","red"); //取所有class="item"的元素，变成红色
    $("ul .item:first").css("color","red");//取第一个，变成红色
    $("ul .item:last").css("color","red");//取最后一个
    $("ul .item:eq(2)").css("color","red");//取元素下标为2的元素变成红色
    $("ul .item:even").css("color","red");//取元素下标为偶数的元素变成红色
    $("ul .item:odd").css("color","red");//取元素下标为奇数的元素变成红色
    $("ul .item:gt(2)").css("color","red");//取元素下标大于2的元素变成红色
    $("ul .item:lt(4)").css("color","red");//取元素下标小于4的元素变成红色
    //属性选择器
    $("[alex='sb']").css("color","red");
    //表单选择器: $(":text)
    $("[type='text']").css("border","3px solid red");
    $(":text").css("border","3px solid red")

</script>

</body>
</html>
jQuery筛选器，属性选择器和层级选择器

 

posted on 2017-05-31 17:25  bigdata_devops  阅读(187)  评论(0)  编辑  收藏  举报

导航