jQuery: 选择器，筛选器，jQuery 对象和DOM对象 相互转化

jQuery 简介

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

官方下载地址：http://jquery.com/download/

选择器

基本选择器: $("*"), $("#id"), $(".class"), $("element"), $(".class,p,div")

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>

<script>
    $("*").css("color","red");
    $("*").css("color","red").css("background", "yellow");
    $("div").css("color","red");
    $("#p1").css("color","red");
    $(".div1").css("color","red");
    $(".div1, #p1").css("color","red");
</script>
</body>

层级选择器: $(".outer div"), $(".outer>div"), $(".outer+div"), $(".outer~div")

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>hello div</div>
<div class="div1">hello div1</div>
<p>hello p</p>
<p id="p1">hello p1</p>
<p>hello p4</p>
<dir class="outer">
    <div>
        <p>hello p2</p>
    </div>
        <p>hello p3</p>
</dir>
<p>hello p5</p>
<p>hello p6</p>
<script>
    $(".outer p").css("color","red");     // outer 下所有的 p 元素
    $(".outer>p").css("color","red");     // outer 下的子 p 元素
    $(".outer+p").css("color","red");     // outer 下面的一个 p 元素
    $(".outer~p").css("color","red");     // outer 下面所有的 p 元素

</script>
</body>

基本筛选器: $("li:first"), $("li:eq(2)"), $("li:even"), $("li:gt(1)")

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div">hello div
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</div>
<script>
    $(".div li:first").css("color","green");
    $(".div li:last").css("color","green");
    $(".div li:eq(2)").css("color","green");
    $(".div li:lt(2)").css("color","green");
    $(".div li:gt(1)").css("color","green");
</script>
</body>

属性选择器: $('[id="div1"]'), $('["lily="luck"][id]')

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p lily="good">hello p1</p>
<p lily="luck">hello p2</p>
<script>
    $("[lily]").css("color","pink");
    $("[lily='luck']").css("color","pink");
</script>
</body>

表单选择器: $("[type='text']")----->$(":text") 注意只适用于input标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text">
<input type="button">
<script>
    $("[type='button']").css("width","200px");
    $(":button").css("width","200px");
</script>
</body>

筛选器

查找筛选器: $("div").children(".test"), $("div").find(".test")

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
    <div class="div2">hello2
        <div class="div3">
            hello3
        </div>
    </div>
    <div>hello4</div>
</div>

<script>
    $(".div1").children().css('color',"red")
    $(".div1").children(".div2").css('color',"red")         // 只找儿子辈
    $(".div1").find(".div3").css("color","red")             // 后辈都找
</script>
</body>

$(".test").next(), $(".test").nextAll(), $(".test").nextUntil()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
    <div class="div8">hello8</div>
    <div class="div2">hello2
        <div class="div3">
            hello3
        </div>
    </div>
    <div class="div4">hello4</div>
    <div class="div5">hello5</div>
    <div class="div6">hello6</div>
    <div class="div7">hello7</div>
</div>
<script>
    $(".div2").next().css("color","red");
    $(".div2").nextAll().css("color","red");
    $(".div2").nextUntil(".div6").css("color","red");   //不包含 .div6
</script>
</body>

$("div").prev(), $("div").prevAll(), $("div").prevUntil()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="div1">hello1
    <div class="div8">hello8</div>
    <div class="div9">hello9</div>
    <div class="div10">hello10</div>
    <div class="div2">hello2
        <div class="div3">
            hello3
        </div>
    </div>
    <div class="div4">hello4</div>
    <div class="div5">hello5</div>
    <div class="div6">hello6</div>
    <div class="div7">hello7</div>
</div>
<script>
    $(".div2").prev().css("color","red");
    $(".div2").prevAll().css("color","red");           // 在同级下起作用
    $(".div2").prevUntil(".div8").css("color","red");  // 不包括 .div8
    $(".div3").parent().css('color',"red");

    $(".div3").parents().css('color',"red");
    $(".div3").parentsUntil("body").css('color','red');
    $(".div2").siblings().css('color','red');
</script>
</body>

jQuery 对象和DOM对象 相互转化

# DOM 对象：   obj = document.getElementById('sel')
# jQuery 对象： $(obj)

# jQuery 对象：$('#'sel)
# DOM 对象：  $('#'sel)[0]
posted @ 2019-02-18 15:45  klvchen  阅读(750)  评论(0)  编辑  收藏  举报