day050 前端JavaScript之jQuery库的使用（1）

本节内容：

1、jQuery是什么
2、什么是jQuery对象
3、寻找元素（选择器和筛选器）
4、操作元素（属性、css、文本操作）

jQuery中文文档及教程网站
 jQuery库下载网站

一、jQuery是什么？

1、jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

2、jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

3、它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

4、jQuery是一个快速的，简洁的javaScript库，
使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二、什么是jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

jQuery 对象是 jQuery 独有的。

如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

1、jQuery语法

$(selector).action()

jQuery拿到的是一个存放DOM对象的集合，(即使只有一个那也是个集合)
默认会将集合中的每一项执行后面的action操作

$("#test").html()

    意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

    这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

2、jQuery对象和DOM对象的相互转换

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，
同理DOM对象也不能使用jQuery里的方法.乱使用会报错

1、创建对象
    var $variable = jQuery 对象
    var variable = DOM 对象

2、对象转换
$variable[0]：jquery对象转为dom对象

$()[]------>dom对象
$(dom)------>jquery对象

示例：
$("#msg").html();  //  转换成jQuery对象操作
$("#msg")[0].innerHTML  // 转换成DOM对象的操作

三、寻找元素（选择器和筛选器）

1、选择器

3.1.1 基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

3.1.2 层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.1.3 基本筛选器　　

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

进阶版的：
    $("li").first()   $("li").eq(index)   (就是将其分开方便你输入index)

3.1.4 属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

3.1.5 表单选择器

$("[type='text']")----->$(":text")    注意只适用于input标签  : $("input:checked")

2、表单属性选择器

:enabled
:disabled
:checked
:selected

代码示例

<body>

<form>
    <input type="checkbox" value="123" checked>
    <input type="checkbox" value="456" checked>


  <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
      <option value="3" selected="selected">Trees</option>
  </select>
</form>


<script src="jquery.min.js"></script>
<script>
    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1

    $("input:checked").each(function(){

        console.log($(this).val())
    })

</script>


</body>

3、筛选器

1、过滤筛选器

就是在对标签里面的标签，再一次的选择

("li").eq(2)  ("li").first()  $("ul li").hasclass("test")

2、查找筛选器（也可以叫导航查找）

    查找子标签：         $("div").children(".test")      $("div").find(".test")

    向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()
                          $(".test").nextUntil()

    向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()
                          $("div").prevUntil()

    查找所有兄弟标签：    $("div").siblings()

    查找父标签：         $(".test").parent()              $(".test").parents()
                         $(".test").parentUntil()

代码（详细解释）示例

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

<div class="c1" id="i1">DIV</div>

<div class="c2">
    <p class="c4">111</p>
    <a href="">click</a>
</div>
<div class="p1">
     <p class="c3" id="i3">222</p>
     <p class="c3">333</p>
     <p class="c3" id="i2">444</p>
     <p class="c3">555</p>
     <p class="c3 c8">666</p>
     <p class="c3">777</p>
</div>

<div alex="123" peiqi="678">alex和配齐</div>
<div alex="123">alex</div>
<div alex="234">egon</div>
<div peiqi="678">8888</div>
<div class="c5">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

 <input type="checkbox">

<div class="c6" yuan="checkbox">123</div>
<div class="c7" yuan="234">234</div>


<div class="c9">
    <p>111</p>
    <p>222</p>
    <div class="c10">
        <p>333</p>
    </div>
    <a href="">click</a>
</div>

<script src="jquery-3.3.1.js"></script>
<script>
    // 1、基本选择器和筛选器

    // $(".c1").css("color","red");  // 根据类名来操作css样式
    // $(".c3").css("color","red");
    // $(".c3:first()").css("color","red");  // 找到类集合，取第一个
    // $(".c3:last()").css("color","red");  // .c3类，取最后一个进行操作
    // $(".c3:eq(3)").css("color","red");   // 根据索引
    // $(".c3:even").css("color","red");   // 选择该类的索引为双的标签
    // $(".c3:odd").css("color","red");  // 选择该类下，索引为单的标签
    // $(".c3:gt(2)").css("color",'red');  // 选择索引大于2的标签，（开区间）
    // $(".c3:lt(2)").css("color","red");   // 选择索引小于2的标签，（开区间）
    // $("[alex]").css("color","red");    // 选择所有有这个属性名的标签
    // $("[alex='123']").css('color',"red");  // 选择属性名有这个值的所有标签
    // $("[alex='123'][peiqi]").css('color','red');  (重点)// 选择同时有两个属性名的标签
    // $("[type='checkbox']").attr("checked","checked");  // 选择该属性名下设置css属性，
    // $(":checkbox").attr("checked","chceked");  // 选择所有值为checked的标签

    // 二、进阶版筛选器
    // $(".c3:first").css("color","red");   // 普通版，写在里面
    // $(".c3").first().css("color","red");  // 进阶版分开写，写在外面可读性也好

    // var index=3;
    // $(".c3:" + "eq(" + index + ")").css("color","red");  // 字符串需要这样拼接
    // $(".c3").eq(index).css("color","red");  // 写在外面就可以直接用索引号

    // 判断某个标签是否拥有某个class名
    // console.log($("#i1").hasClass("c2"))  // 打印false

    // console.log($("#i3").hasClass("c3"))  // 有则打印true

    // 三、导航选择器
    // 查找兄弟标签(都是开区间，不含本身)
    // $("#i2").next().css("color",'red');  // next()下一个兄弟标签
    // $("#i2").nextAll().css("color","red");  // 其后面的所有兄弟标签
    // $("#i2").nextUntil(".c8").css("color","red"); // 其到其后之间的兄弟标签（开）
    // $("#i2").prev().css("color","red");  // 其上一个兄弟标签
    // $("#i2").prevAll().css("color",'red');  // 其之前的所有兄弟标签
    // $("#i2").prevUntil("#i3").css("color","red"); // 其到其之前的兄弟标签

    // $("#i2").siblings().css("color","red");  // 除其之外的所有兄弟标签

    // 查找子孙标签
        // 儿子标签
    // $(".p1").children().css("color","red");  // 所有的儿子标签
    // $(".p1").children(":first").css("color","red");  // 第一个儿子标签
    // $(".p1").children().first().css("color","red");  // 常用，第一个儿子标签

    // $(".c9").children("p").css("color","red");  // 所有儿子的p标签
    // $(".c9").find("p").css("color","red");  // 其后代的所有p标签

    // 查找父类标签
    // $(".c10").parent();   // 拿到父亲的一个列表[div.c9,]
    // $(".c10").parents();      // 拿到各个父代
    // $(".c10").parentsUntil();  // 从自己往上多少代，拿到之间的父类列表

</script>
</body>
</html>

四、操作元素(属性，css，文档处理)

1、事件

1、控制载入顺序

想要把script标签写在head标签里，就要让script最后载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

(document).ready(function(){}) -----------> (function(){})

2、事件绑定

//语法:  标签对象.事件(函数)
eg: $("p").click(function(){})

3、事件委派

让其内的元素拥有共同的属性，及触发的事件
$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

事件绑定及委派的代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {  // 这个开头作用==load,最后加载这里
            //  语法：$().事件(function(){})
            /*
            $("ul li").click(function () {
                // this; 当前触发的标签，即一个DOM对象
                // alert(this.innerHTML)  // js原生写法
                alert($(this).html())  // jquery写法
            })
            */

            // 事件委派
            $("ul").on("click","li", function () {  // 委派
               alert($(this).html())
            });

            // 添加一个标签的事件
            $(".add").click(function () {  // 绑定事件
                $(".box").append("<li>789</li>")  // 在父级标签里添加子标签
            })
        })
    </script>

</head>
<body>

<ul class="box">
    <li>123</li>
    <li>234</li>
    <li>456</li>
    <li>567</li>
    <li class="c1">678</li>
</ul>
<button class="add">ADD</button>  <!-- 新添加的标签也有跟其他兄弟标签的相同属性 -->
</body>
</html>

4、事件切换

hover事件：

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{

             200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>


<div class="test"></div>
</body>
<script src="jquery.min.js"></script>
<script>
//    function enter(){
//        console.log("enter")
//    }
//    function out(){
//        console.log("out")
//    }
// $(".test").hover(enter,out)


$(".test").mouseenter(function(){
        console.log("enter")
});

$(".test").mouseleave(function(){
        console.log("leave")
    });

</script>
</html>

2、属性操作

<p><a href="">123</a></p>
<script src="jquery-3.3.1.js"></script>
<script>
     /*
    1、文本操作
        读取
        $("").html()
        $("").text()
        写入
        $("").html("数据内容")  // 浏览器会渲染
        $("").text("数据内容")  // 浏览器不渲染，原样输出

    2、属性操作
          $().attr("属性名")
          $().attr("属性名","值")
          $("p").attr("alex")  // 获取该属性的值
          $("p").attr("alex","dsb")  // 设置该属性，（属性名，属性值）
          $("p").removeAttr("class")  // 移除该属性

     3、class操作（常用）
          $("p").addClass("c1")  // 为标签添加一个class属性
          $("p").removeClass("c1")  // 为标签删除一个class属性

        */

</script>

1、attr方法使用：

代码示例

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见



<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

参考文章