【jQuery】

一、jQuery的定义

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

 

特点

• 快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

• 提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

• 创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

• 提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

• 增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

• 更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

 

二、jQuery的对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

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

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

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

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

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

 

参考文档：http://jquery.cuishifeng.cn/

 

三、jQuery的选择器及筛选器

1、选择器

• 基本选择器

$("*")  　#通用选择器
$("#id")  #id选择器
$(".class")  #类选择器
$("p")  #通用选择器
$(".class,p,div")

• 层级选择器  

$(".outer div")  #后代元素选择器，匹配所有属于outer元素后代的div元素

$(".outer>div")  #子元素选择器，匹配所有outer元素的子元素div 

$(".outer+div")  #毗邻元素选择器，匹配所有紧随outer元素之后的同级元素div 

$(".outer~div")  #普通兄弟选择器

• 表单选择器

$(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text")                     选择所有的text input元素

$(":password")           选择所有的password input元素

$(":radio")                   选择所有的radio input元素

$(":checkbox")            选择所有的checkbox input元素

$(":submit")               选择所有的submit input元素

$(":image")                 选择所有的image input元素

$(":reset")                   选择所有的reset input元素

$(":button")                选择所有的button input元素

$(":file")                     选择所有的file input元素

$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域

 

2、筛选器

• 基本筛选器

  $("tr:first")               选择所有tr元素的第一个

  $("tr:last")                选择所有tr元素的最后一个

$("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 
$("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")             选择td元素中序号大于4的所有td元素
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素

 

• 属性筛选器

$("div[id]")                   选择所有含有id属性的div元素 

$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 　选择所有的name属性不等于'newsletter'的input元素 

$("input[name^='news']")         选择所有的name属性以'news'开头的input元素

$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素

$("input[name*='man']")          选择所有的name属性包含'news'的input元素

$("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

 

•  内容筛选器

$("div:contains('John')") 选择所有div中含有John文本的元素 
$("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组 
$("div:has(p)")        选择所有含有p标签的div元素 
$("td:parent")          选择所有的以td为父节点的元素数组 

 

• 可视化筛选器

$("div:hidden")        选择所有的被hidden的div元素 
$("div:visible")        选择所有的可视化的div元素 

 

• 表单筛选器

$(":enabled")             选择所有的可操作的表单元素 
$(":disabled")            选择所有的不可操作的表单元素 
$(":checked")            选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素 

 

• 查找筛选器

 查找子标签：         
$("div").children(".test")      #返回匹配元素集合中每个元素的所有子元素（仅儿子辈）
　　　　　　　　　　　
$("div").find(".test")  　　　　#返回匹配元素集合中每个元素的后代
                               
 向下查找兄弟标签：    
$(".test").next()       #紧挨着$('')的一个元素         
$(".test").nextAll()     #在$('')以后的所有的同辈元素 
                   
$(".test").nextUntil() #until有直到。。。之前的意思，所以他表示$('')以后的所有的同辈元素，不过要在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>

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

<p>p123</p>
<p class="item">p123</p>
<p class="item">p123</p>
<p id="p1">p123</p>

<div class="outer">
    <div class="inner">
        <div id="d1">DIV</div>
        <p>p1</p>
    </div>
    <p>p2</p>
</div>


<div class="c1">
    <div class="c2">
        <ul class="num">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li class="l4">444</li>
            <li>555</li>
        </ul>

    </div>
</div>
<div hx="1000">hx is egg!</div>
<div hx="2000">hx is egg!</div>


<input type="text">
<input type="checkbox">

<script>
    //============================== 直接查找标签
    // 基本选择器
    // ---标签的选择器
    // $("p").css("color","red")  ;                 //  [ele1,ele2]
    // --- class  选择器
    //$(".item").css("color","red");
    // --- id  选择器
   // $("#p1").css("color","red")

    // 层级选择器
    //$(".outer p").css("color","red");
    //$(".outer>p").css("color","red");

    // 基本筛选器 :
    // $(".num li:first").css("color","red");
    // $(".num li:last").css("color","red");
    //$(".num li:eq(2)").css("color","red");
   // $(".num li:gt(3)").css("color","red");
    //$(".num li:odd").css("color","red");
    //$(".num li:even").css("color","red");

    // 属性选择器
    // $("[egon=1000]").css("color","red");
    // 表单选择器: 针对表单标签
    //$("[type='text']").css("border","1px solid red");

    // $(":text").css("border","1px solid red");
    // $(":checkbox").css("border","1px solid red");

    //  筛选器
    // var num=2;
    //
    // //$(".num li:eq(num)").css("color","red");
    // $(".num li").eq(num).css("color","red");

    // ======================================导航查找标签
   // 找兄弟
   // $(".num li").eq(1).next().css("color","red"); // 找下一个兄弟标签
   // $(".num li").eq(1).nextAll().css("color","red") ; // 找下一个兄弟标签
   // $(".num li").eq(0).nextUntil(".l4").css("color","red") ; // 找下一个兄弟标签

     // 查找所有的兄弟标签
     // $(".num li").eq(1).siblings().css("color","red")

     //  找儿子
    //$(".outer").children("p").css("color","red")
    //$(".outer").find("p").css("color","red")

     // 找父亲
    // $(".l4").parent().css("color","red")
    // $(".l4").parents().css("color","red")
    // $(".l4").parentsUntil(".c1").css("color","red")



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

示例

 

四、jQuery的操作元素

1、事件

• 事件绑定

语法: 标签对象.事件(函数)

$("p").click(function(){})

例

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


<p>111</p>
<p id="p1">222</p>
<p>333</p>



<script src="jquery-3.2.1.min.js"></script>
<script>
    //   $().事件方法名(function(){       })
    $("p").click(function () {
        //console.log(this)      // this 指的是当前事件触发的标签
        // console.log($(this))
        //alert(this);   //   Dom(标签)对象-------->  $(dom)

        alert($(this).html())
     })

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

 

2、文本操作

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

<div>
    <p>DIV</p>
</div>
<button>click</button>
<p>PPP</p>

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

    //  文本取值

    console.log($("div").text());  //  不识别标签，只取文本
    console.log($("div").html());   // 识别标签

     // 文本赋值

    $("button").click(function () {
        // 操作p标签
        //$("div p").text("hello");
       // $("div p").html("hello")


        $("div").text("<a href=''>click</a>");
        //$("div").html("<a href=''>click</a>");



    })
</script>
</body>
</html>

 

3、class操作

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

    <style>
        .c1{
            color: rebeccapurple;
        }
        .c2{
            background-color: gray;
        }
        .c3{
            font-size: 32px;
        }
    </style>
</head>
<body>


<script src="jquery-3.2.1.min.js"></script>
<div class="c1 c2">DIV</div>

<script>
    /*
    $("div").addClass("c3")
    r.fn.init [div.c1.c2.c3, prevObject: r.fn.init(1)]
    $("div").addClass("c3")
    r.fn.init [div.c1.c2.c3, prevObject: r.fn.init(1)]
    $("div").removeClass("c1")
    r.fn.init [div.c2.c3, prevObject: r.fn.init(1)]
    $("div").removeClass("c2")
    r.fn.init [div.c3, prevObject: r.fn.init(1)]
    $("div").removeClass("c2")
    r.fn.init [div.c3, prevObject: r.fn.init(1)]
    $("div").removeClass("c1")
    r.fn.init [div.c3, prevObject: r.fn.init(1)]
    $("div").removeClass("c3")
    r.fn.init [div, prevObject: r.fn.init(1)]


     */

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

 

 

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left_menu{
            width: 20%;
            height: 600px;
            background-color: darkgrey;
            float: left;
        }

        .content{
            width: 80%;
            height: 600px;
            background-color: cadetblue;
            float: left;
        }
        .hide{
            display: none;
        }

        .item{
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div>
    <div class="left_menu">
          <div class="item">
            <div class="title c1">菜单一</div>
            <div class="con">
                <p>111</p>
                <p>111</p>
                <p>111</p>
            </div>
        </div>
          <div class="item">
            <div class="title c2">菜单二</div>
            <div class="con hide">
                <p>222</p>
                <p>222</p>
                <p>222</p>
            </div>
        </div>
          <div class="item">
            <div class="title c3">菜单三</div>
            <div class="con hide">
                <p>333</p>
                <p>333</p>
                <p>333</p>

            </div>
        </div>
    </div>
    <div class="content"></div>
</div>

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

<script>
    $(".title").click(function () {
        // console.log($(this));
        // 第一： 当前触发事件的标签的兄弟标签
        //$(this).next().removeClass("hide");

        //$(this).parent().siblings().children(".con").addClass("hide")

        // 支持链式操作

        $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
    })
</script>
</body>
</html>

左侧菜单