JavaWeb-JQuery

已于 2023-03-20 12:15:12 修改
阅读量473 收藏
点赞数
文章标签： jquery 学习 javascript
于 2023-01-08 23:17:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ego_Ekko/article/details/128545311
版权

简单介绍

是JavaScript和查询Query，辅助JavaScript开发的JS类库，实现了很多浏览器的兼容问题，可以是开发更加敏捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>new world</title>
    <!-- 在服务器上引用JQuery -->
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="newWorld.js"></script>
</head>
<body>
    <button id="btnId">pero</button>
</body>
</html>
$(function () { //表示页面加载完成之后，相当于onload事件
    var $btnObj = $("#btnId"); //表示id查询标签对象
    $btnObj.click(function () { //绑定单击事件
       alert("JQuery的单击事件")
    });
});

核心函数

$是JQuery的核心函数，能够完成JQuery的很多功能，$()是调用$函数

①当传入参数为函数时：表示页面加载完成之后执行传入函数，相当于window.onload = function(){}

②当传入参数为HTML字符串时：创建HTML对象标签

③当传入参数为选择器字符串时：

        $("#id属性值");        id选择器，根据id查询标签对象

        $("标签名");        标签名选择器，根据指定的标签名查询标签对象

        $(".class属性值");        类型选择器，根据class属性查询标签对象

④当传入参数为DOM对象时：将dom对象转换为JQuery对象

<!DOCTYPE html >
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>核心函数</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="核心函数.js"></script>
</head>
<body>
    <button id="btnId">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div>
        <span>div-span1</span>
        <span>div-span2</span>
    </div>
</body>
</html>
//当传入参数为函数时：表示页面加载完成之后执行传入函数，相当于window.onload = function(){}
$(function () {
   alert("页面加载完成，自动调用");
   //当传入参数为HTML字符串时：创建HTML对象标签
   $("<div>" +
       "        <span>div-span1</span>" +
       "        <span>div-span2</span>" +
       "    </div>").appendTo("body");
   /**
    * 当传入参数为选择器字符串时：
    * $("#id属性值");   id选择器，根据id查询标签对象
    * $("标签名");   标签名选择器，根据指定的标签名查询标签对象
    * $(".class属性值");   类型选择器，根据class属性查询标签对象
    */
   alert($("button").length);
   var btnObj = document.getElementById("btnId");
   alert(btnObj);
   alert($(btnObj));
});

JQuery对象和Dom对象的区分

Dom对象

①通过getElementById()、getElementsByName()、getElementsByTagName()查询出来的对象为Dom对象

②通过createElement()方法创建出来的对象为Dom对象

JQuery对象

①通过JQuery提供的API创建的对象为JQuery对象

②通过JQuery包装的Dom对象为JQuery对象

③通过JQuery提供的API查询到的对象为JQuery对象

JQuery对象的本质

JQuery对象的本质是Dom对象的数组 + JQuery提供的一系列功能函数

JQuery对象和Dom对象使用区别

JQuery对象不能使用Dom对象的属性和方法，Dom对象不能使用JQuery对象的属性和方法

Dom对象和JQuery对象互换

Dom对象转化为JQuery对象

①先获取Dom对象

②$(Dom对象)就可以转化为JQuery对象

JQuery对象转化为Dom对象

①先获取JQuery对象

②JQuery对象[下标]取出相应的Dom对象

JQuery选择器

基本选择器

①#ID选择器：根据id查找标签对象

②.class选择器：根据class查找标签对象

③element选择器：根据标签名查找标签对象

④*选择器：查找任意的，所有的元素

⑤selector01，selector02组合选择器：合并选择器01，选择器02的结果并返回

p.myClass表示标签名必须是p标签，并且class类型必须是myClass类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>基本选择器</title>
    <link rel="stylesheet" href="基本选择器.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="基本选择器.js"></script>
</head>
<body>
  <!-- <div><h1>基本选择器</h1></div> -->
  <input type="button" value="选择id为one的元素" id="btn01"/>
  <input type="button" value="选择class为mini的所有元素" id="btn02"/>
  <input type="button" value="选择元素名为div的所有元素" id="btn03"/>
  <input type="button" value="选择所有元素" id="btn04"/>
  <input type="button" value="选择所有的span元素和id元素为two的元素" id="btn05"/>
  <br>
  <div class="one" id="one">
    id为one，class为one的div
    <div class="mini">class为mini的div</div>
  </div>
  <div class="one" id="two" title="test">
    id为two，class为one，title为test的div
    <div class="mini" title="other">class为mini，title为other的div</div>
    <div class="mini" title="test">class为mini，title为test的div</div>
  </div>
  <div class="one">
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini"></div>
  </div>
  <div class="one">
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini" title="tesst">class为mini,title为tesst的div</div>
  </div>
  <div style="display: none" class="none">style的dispaly为none的div</div>
  <div class="hide">class为hide的div</div>
  <div>
    包含input的type为hidden的div<input type="hidden" size="8">
  </div>
  <span class="one" id="span">^^span元素^^</span>
</body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(function () {
    /**
     * ①选择器id为one的元素background-color,#bbffaa
     */
    $("#btn01").click(function () {
        //css方法可以获取和设置样式
        $("#one").css("background-color", "#bbffaa");
    });
    /**
     * ②选择class为mini的所有元素
     */
    $("#btn02").click(function () {
        $(".mini").css("background-color", "#bbffaa");
    });
    /**
     * ③选择元素是div的所有元素
     */
    $("#btn03").click(function () {
        $("div").css("background-color", "#bbffaa");
    });
    /**
     * ④选择所有元素
     */
    $("#btn04").click(function () {
        $("*").css("background-color", "#bbffaa");
    });
    /**
     * ⑤选择所有的span元素和id为two的元素
     */
    $("#btn05").click(function () {
        $("span,#two").css("background-color","#bbffaa");
    });
})

层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素

prev ~ siblings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>层级选择器</title>
    <link rel="stylesheet" href="层级选择器.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="层级选择器.js"></script>
</head>
<body>
  <!-- <div><h1>层级选择器</h1></div> -->
  <input type="button" value="选择body内的所有div元素" id="btn01"/>
  <input type="button" value="在body内，选择div子元素" id="btn02"/>
  <input type="button" value="选择id为one的下一个div元素" id="btn03"/>
  <input type="button" value="选择id为two的元素后面的所有div兄弟元素" id="btn04"/>
  <br>
  <div class="one" id="one">
    id为one，class为one的div
    <div class="mini">class为mini的div</div>
  </div>
  <div class="one" id="two" title="test">
    id为two，class为one，title为test的div
    <div class="mini" title="other">class为mini，title为other的div</div>
    <div class="mini" title="test">class为mini，title为test的div</div>
  </div>
  <div class="one">
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini"></div>
  </div>
  <div class="one">
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini">class为mini的div</div>
    <div class="mini" title="tesst">class为mini,title为tesst的div</div>
  </div>
  <div style="display: none" class="none">style的dispaly为none的div</div>
  <div class="hide">class为hide的div</div>
  <div>
    包含input的type为hidden的div<input type="hidden" size="8">
  </div>
  <span class="one" id="span">^^span元素^^</span>
</body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(document).ready(function (){
    /**
     * ①选择body内的所有div元素
     */
    $("#btn01").click(function () {
        $("body div").css("background","#bbffaa");
    });

    /**
     * ②在body内，选择div子元素
     */
    $("#btn02").click(function () {
       $("body > div").css("background","#bbffaa");
    });
    /**
     * ③选择id为one的下一个div元素
     */
    $("#btn03").click(function () {
        $("#one+div").css("background","#bbffaa");
    });
    /**
     * ④选择id为two的元素后面的所有div兄弟元素
     */
    $("#btn04").click(function () {
        $("#two~div").css("background","#bbffaa");
    });
});

过滤选择器

基本过滤选择器

1）:first                        获取第一个元素
2）:last                        获取最后一个元素
3）:not(selector)        去除所有与给定选择器匹配的元素
4）:even                     匹配所有索引值为偶数的元素，从0开始计数
5）:odd                       匹配所有索引值为奇数的元素，从0开始计数
6）:eq(index)              匹配一个给定索引值的元素
7）:gt(index)               匹配所有大于给定索引值的元素
8）:lt(index)                匹配所有小于给定索引值的元素
9）:header                  匹配如h1，h2，h3之类的标题元素
10）:animated             匹配所有正在执行动画效果的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>基本的过滤选择器</title>
    <link rel="stylesheet" href="基本的过滤选择器.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="基本的过滤选择器.js"></script>
</head>
<body>
    <input type="button" value="选择第一个div元素" id="btn01"/>
    <input type="button" value="选择最后一个div元素" id="btn02"/>
    <input type="button" value="选择class不为one的所有div元素" id="btn03"/>
    <input type="button" value="选择索引值为偶数的div元素" id="btn04"/>
    <input type="button" value="选择索引值为奇数的div元素" id="btn05"/>
    <input type="button" value="选择索引值大于3的div元素" id="btn06"/>
    <input type="button" value="选择索引值等于3的div元素" id="btn07"/>
    <input type="button" value="选择索引值小于3的div元素" id="btn08"/>
    <input type="button" value="选择所有的标题元素" id="btn09"/>
    <input type="button" value="选择当前正在执行动画的所有元素" id="btn10"/>
    <input type="button" value="选择没有执行动画的最后一个div元素" id="btn11"/>
    <h3>基本过滤选择器</h3>
    <br>
    <br>
    <div class="one" id="one">
        id为one，class为one的div
        <div class="mini">class为mini的div</div>
    </div>
    <div class="one" id="two" title="test">
        id为two，class为one，title为test的div
        <div class="mini" title="other">class为mini，title为other的div</div>
        <div class="mini" title="test">class为mini，title为test的div</div>
    </div>
    <div class="one">
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini" title="tesst">class为mini,title为tesst的div</div>
    </div>
    <div style="display: none" class="none">style的dispaly为none的div</div>
    <div class="hide">class为hide的div</div>
    <div>
        包含input的type为hidden的div<input type="hidden" size="8">
    </div>
    <div id="mover">正在执行动画的div</div>
</body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(function () {
    function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
    }

    anmateIt();
});
$(function () {
    /**
     * 选择第一个div元素
     */
    $("#btn01").click(function () {
        $("div:first").css("background","#bbffaa");
    });
    /**
     * 选择最后一个div元素
     */
    $("#btn02").click(function () {
        $("div:last").css("background","#bbffaa");
    });
    /**
     * 选择class不为one的所有div元素
     */
    $("#btn03").click(function () {
        $("div:not(.one)").css("background","#bbffaa");
    });
    /**
     * 选择索引值为偶数的div元素
     */
    $("#btn04").click(function () {
        $("div:even").css("background","#bbffaa");
    });
    /**
     * 选择选择索引值为奇数的div元素
     */
    $("#btn05").click(function () {
        $("div:odd").css("background","#bbffaa");
    });
    /**
     * 选择索引值大于3的div元素
     */
    $("#btn06").click(function () {
        $("div:gt(3)").css("background","#bbffaa");
    });
    /**
     * 选择索引值等于3的div元素
     */
    $("#btn07").click(function () {
        $("div:eq(3)").css("background","#bbffaa");
    });
    /**
     * 选择索引值小于3的div元素
     */
    $("#btn08").click(function () {
        $("div:lt(3)").css("background","#bbffaa");
    });
    /**
     * 选择所有的标题元素
     */
    $("#btn09").click(function () {
        $(":header").css("background","#bbffaa");
    });
    /**
     * 选择当前正在执行动画的所有元素
     */
    $("#btn10").click(function () {
        $(":animated").css("background","#bbffaa");
    });
    /**
     * 选择没有执行动画的最后一个div元素
     */
    $("#btn11").click(function () {
        $("div:not(:animated):last").css("background","#bbffaa");
    });
});

内容过滤选择器

1）:contains(text)               匹配包含给定文本的元素
2）:empty                            匹配所有不包含子元素或者文本的空元素
3）:has(selector)                匹配含有选择器所匹配的元素的元素
4）:parent                           匹配含子元素或文本的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>内容过滤器</title>
    <link rel="stylesheet" href="内容过滤器.css">
   <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
   </script>
    <script type="text/javascript" src="内容过滤器.js"></script>
  </head>
  <body>
    <input type="button" value="选择含有文本di的div元素" id="btn01"/>
    <input type="button" value="选择不包含子元素（或者文本元素）的div空元素" id="btn02"/>
    <input type="button" value="选择含有class为mini元素的div元素" id="btn03"/>
    <input type="button" value="选择含有子元素（或者文本元素）的div元素" id="btn04"/>
    <h3>内容过滤器</h3>
    <br>
    <br>
    <div class="one" id="one">
      id为one，class为one的div
      <div class="mini">class为mini的div</div>
    </div>
    <div class="one" id="two" title="test">
      id为two，class为one，title为test的div
      <div class="mini" title="other">class为mini，title为other的div</div>
      <div class="mini" title="test">class为mini，title为test的div</div>
    </div>
    <div class="one">
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini"></div>
    </div>
    <div class="one">
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini" title="tesst">class为mini,title为tesst的div</div>
    </div>
    <div style="display: none" class="none">style的dispaly为none的div</div>
    <div class="hide">class为hide的div</div>
    <div>
      包含input的type为hidden的div<input type="hidden" size="8">
    </div>
    <div id="mover">正在执行动画的div</div>
  </body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(function () {
    function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
    }

    anmateIt();
});
$(function () {
    /**
     * 选择含有文本di的div元素
     */
    $("#btn01").click(function () {
        $("div:contains('di')").css("background","#bbffaa");
    });
    /**
     * 选择不包含子元素（或者文本元素）的div空元素
     */
    $("#btn02").click(function () {
        $("div:empty").css("background","#bbffaa");
    });
    /**
     * 选择含有class为mini元素的div元素
     */
    $("#btn03").click(function () {
        $("div:has(.mini)").css("background","#bbffaa");
    });
    /**
     * 选择含有子元素（或者文本元素）的div元素
     */
    $("#btn04").click(function () {
        $("div:parent").css("background","#bbffaa");
    });
})

属性过滤选择器

1）[attribute]                                        匹配包含给定属性的元素
2）[attribute=value]                             匹配给定的属性是某个特定值的元素
3）[attribute!=value]                            匹配所有不含有指定的属性，或者属性不等于特定值的元素
4）[attribute^=value]                           匹配给定的属性是以某些值开始的元素
5）[attribute$=value]                           匹配给定的属性是以某些值结尾的元素
6）[attribute*=value]                            匹配给定的属性是以包含某些值的元素
7）[attrSel1][attrSel2][attrSelN]           复合属性选择器，需要同时满足多个条件时使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>属性过滤选择器</title>
    <link rel="stylesheet" href="属性过滤选择器.css">
   <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
   </script>
    <script type="text/javascript" src="属性过滤选择器.js"></script>
  </head>
  <body>
    <input type="button" value="选择含有属性title的div元素" id="btn01"/>
    <input type="button" value="选择属性title值等于test的div元素" id="btn02"/>
    <input type="button" value="选择属性title值不等于test的div元素（没有属性title的也将被选中）" id="btn03"/>
    <input type="button" value="选取属性title值以te开始的div元素" id="btn04"/>
    <input type="button" value="选取属性title值以est结束的div元素" id="btn05"/>
    <input type="button" value="选取属性title值含有es的div元素" id="btn06"/>
    <input type="button" value="组合属性选择器，首先选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素" id="btn07"/>
    <input type="button" value="选取含有title属性值且title属性值不等于test的div元素" id="btn08"/>
    <h3>内容过滤器</h3>
    <br>
    <br>
    <div class="one" id="one">
      id为one，class为one的div
      <div class="mini">class为mini的div</div>
    </div>
    <div class="one" id="two" title="test">
      id为two，class为one，title为test的div
      <div class="mini" title="other">class为mini，title为other的div</div>
      <div class="mini" title="test">class为mini，title为test的div</div>
    </div>
    <div class="one">
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini"></div>
    </div>
    <div class="one">
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini">class为mini的div</div>
      <div class="mini" title="tesst">class为mini,title为tesst的div</div>
    </div>
    <div style="display: none" class="none">style的dispaly为none的div</div>
    <div class="hide">class为hide的div</div>
    <div>
      包含input的type为hidden的div<input type="hidden" size="8">
    </div>
    <div id="mover">正在执行动画的div</div>
  </body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(function () {
    function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
    }

    anmateIt();
});
$(function () {
    /**
     * 选择含有属性title的div元素
     */
    $("#btn01").click(function () {
        $("div[title]").css("background","#bbffaa");
    });
    /**
     * 选择属性title值等于test的div元素
     */
    $("#btn02").click(function () {
        $("div[title='test']").css("background","#bbffaa");
    });
    /**
     * 选择属性title值不等于test的div元素（没有属性title的也将被选中）
     */
    $("#btn03").click(function () {
        $("div[title!='test']").css("background","#bbffaa");
    });
    /**
     * 选取属性title值以te开始的div元素
     */
    $("#btn04").click(function () {
        $("div[title^='te']").css("background","#bbffaa");
    });
    /**
     * 选取属性title值以est结束的div元素
     */
    $("#btn05").click(function () {
        $("div[title$='est']").css("background","#bbffaa");
    });
    /**
     * 选取属性title值含有es的div元素
     */
    $("#btn06").click(function () {
        $("div[title*='es']").css("background","#bbffaa");
    });
    /**
     * 组合属性选择器，首先选取有属性id的div元素，然后在结果中选取属性title值含有es的div元素
     */
    $("#btn07").click(function () {
        $("div[id][title*='es']").css("background","#bbffaa");
    });
    /**
     * 选取含有title属性值且title属性值不等于test的div元素
     */
    $("#btn08").click(function () {
        $("div[title][title!='test']").css("background","#bbffaa");
    });
})

表单过滤选择器

1）:input                                匹配所有 input, textarea, select 和 button 元素
2）:text                                  匹配所有的单行文本框
3）:password                        匹配所有密码框
4）:radio                               匹配所有单选按钮
5）:checkbox                        匹配所有复选框
6）:submit                            匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。
7）:image                            匹配所有图像域
8）:reset                              匹配所有重置按钮
9）:button                            匹配所有按钮
10）:file                               匹配所有文件域
11）:hidden                         匹配所有不可见元素，或者type为hidden的元素
12）:visible                          匹配所有的可见元素
13）:enabled                       匹配所有可用元素
14）:disabled                      匹配所有不可用元素
15）:checked                      匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
16）:selected                      匹配所有选中的option元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单过滤选择器</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="表单过滤选择器.js"></script>
</head>
<body>
  <h3>表单对象属性过滤选择器</h3>
  <button id="btn01">对表单内可用input赋值操作</button>
  <button id="btn02">对表单内不可用input赋值操作</button><br/><br/>
  <button id="btn03">获取多选框选中的个数</button>
  <button id="btn04">获取多选框选中的内容</button><br/><br/>
  <button id="btn05">获取下拉选框选中的内容</button><br/><br/>
    <form id="form01" action="#">
        可用元素：<input name="add" value="可用文本框1"/><br/>
        不可用元素：<input name="email" disabled="disabled" value="不可用文本框1"/><br/>
        可用元素：<input name="che" value="可用文本框2"/><br/>
        不可用元素：<input name="name" disabled="disabled" value="不可用文本框2"/><br/>
        <br/>

        多选框：<br/>
        <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
        <input type="checkbox" name="newsletter" value="test2"/>test2
        <input type="checkbox" name="newsletter" value="test3"/>test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
        <input type="checkbox" name="newsletter" value="test5"/>test5

        <br/><br/>
        下拉列表1：<br/>
        <select name="test" multiple="multiple" style="..." id="sele1">
            <option>浙江</option>
            <option selected="selected">辽宁</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>

        <br/><br/>
        下拉列表2：<br/>
        <select name="test2">
            <option>浙江</option>
            <option>辽宁</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
    </form>
</body>
</html>
$(function () {
    /**
     * 对表单内可用input赋值操作
     */
    $("#btn01").click(function () {
        //val()方法可以操作表单项的value属性值
        //可以设置和获取
        $(":text:enabled").val("默认值1");
    });

    /**
     * 对表单内不可用input赋值操作
     */
    $("#btn02").click(function () {
        $(":text:disabled").val("默认值2");
    });

    /**
     * 获取多选框选中的个数
     */
    $("#btn03").click(function () {
        alert($(":checkbox:checked").length);
    });

    /**
     * 获取多选框选中的内容
     */
    $("#btn04").click(function () {
        var $checkboies = $(":checkbox:checked");
        // for (var i = 0; i < $checkboies.length; i++) {
        //     alert($checkboies[i].value);
        // }
        //each()方法时JQuery对象提供的用来遍历元素的方法
        //在遍历的function函数中，有一个this对象，该对象就是当前遍历到的dom对象
        $checkboies.each(function () {
            alert(this.value);
        });
    });

    /**
     * 获取下拉选框选中的内容
     */
    $("#btn05").click(function () {
        //获取选中的option对象
        var $options = $("select option:selected");
        //遍历获取option标签中的文本内容
        $options.each(function () {
            alert(this.innerHTML)
        });
    });
});

元素筛选

过滤
1）eq(index|-index)                获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。类似的有get(index),不过get(index)返回的是DOM对象。
2）first()                                 获取第一个元素
3）last()                                 获取最后个元素
4）hasClass(class)               检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。
5）filter(expr|obj|ele|fn)         筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
6）is(expr|obj|ele|fn)             根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。 '''注意：'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true
7）map(callback)                    将一组元素转换成其他数组（不论是否是元素数组），可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。
8）has(expr|ele)                      保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。
9）not(expr|ele|fn)                    从匹配元素的集合中删除与指定表达式匹配的元素
10）slice(start,[end])                选取一个匹配的子集，与原来的slice方法类似
查找
1）children([expr])                    取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
2）closest(e|o|e)                        jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。closest对于处理事件委托非常有用。.closest( selectors [, context ] )方法从 jQuery 1.7 开始，不再建议使用该方法，但是 jQuery 1.7 之前仍然可以使用。该方法将主要用于 jQuery 内部或插件作者使用。
3）find(e|o|e)                            搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
4）next([expr])                          取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
5）nextAll([expr])                      查找当前元素之后所有的同辈元素。可以用表达式过滤。
6）nextUntil([e|e][,f])                 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。
7）offsetParent()                        返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
8）parent([expr])                        取得一个包含着所有匹配元素的唯一父元素的元素集合。可以使用可选的表达式来筛选。
9）parents([expr])                      取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
10）parentsUntil([e|e][,f])           查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。
11）prev([expr])                         取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
12）prevAll([expr])                     查找当前元素之前所有的同辈元素。可以用表达式过滤。           
13）prevUntil([e|e][,f])               查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。
14）siblings([expr])                  取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。  
串联
1）add(e|e|h|o[,c])                     把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。jQuery 1.4 中， .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。jQuery 1.9 中， .add()方法返回的结果总是按照节点在document（文档）中的顺序排列。在1.9之前，如果上下文或输入的集合中任何一个以脱离文档的节点（未在文档中）开始，使用.add()方法节点不会按照document（文档）中的顺序排序。现在，返回的节点按照文档中的顺序排序，并且脱离文档的节点被放置在集合的末尾。
2）andSelf()                               加入先前所选的加入当前元素中对于筛选或查找后的元素，要加入先前所选元素时将会很有用。从jQuery1.8开始，.andSelf()方法已经被标注过时，在jQuery1.8和更高版本中应使用.addBack()。我们认为对于“添加并返回”以前的结果集合这是一个更好的名字。新方法可以接受一个可选的选择器，该选择器可以用来过滤之前集合，将它添加到当前集合并返回。$(“section, aside”).children(“ul”).addBack(“aside”) 会根据他们在文档中的顺序，得到section与aside下所有ul子元素，外加所有aside元素。虽然.addSelf()在1.9中仍然可以使用，我们建议您尽快修改名称。如果使用.addSelf()，jQuery Migrate插件会提出警告。
3）addBack()                          添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。在讨论中的.end()， jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合，.addBack() 可以提供帮助。
4）contents()                        查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容。
5）end()                                回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>元素筛选</title>
    <link rel="stylesheet" href="元素筛选.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="元素筛选.js"></script>
</head>
<body>
    <input type="button" value="er()选择索引值等于3的div元素" id="btn01"/>
    <input type="button" value="first()选择第一个div元素" id="btn02"/>
    <input type="button" value="last()选择最后一个div元素" id="btn03"/>
    <input type="button" value="filter()在div中选择索引为偶数的" id="btn04"/>
    <input type="button" value="is()判断#one是否为:empty或:parent" id="btn05"/>
    <input type="button" value="has()选择div中包含.mini的" id="btn06"/>
    <input type="button" value="not()选择div中class不为one的" id="btn07"/>
    <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn08"/>
    <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn09"/>
    <input type="button" value="next()#one的下一个div" id="btn10"/>
    <input type="button" value="nextAll()#one后面的所有span元素" id="btn11"/>
    <input type="button" value="nextUntil()#one和span之间的元素" id="btn12"/>
    <input type="button" value="parent().mini的父元素" id="btn13"/>
    <input type="button" value="prev()#two的上一个div" id="btn14"/>
    <input type="button" value="prevAll()span前面所有的div" id="btn15"/>
    <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16"/>
    <input type="button" value="siblings()#two的所有兄弟元素" id="btn17"/>
    <input type="button" value="add()选择所有的span元素和id为two的元素" id="btn18"/>
    <h3>基本过滤选择器</h3>
    文本框:<input type="text" value="">
    <br>
    <br>
    <div class="one" id="one">
        id为one，class为one的div
        <div class="mini">class为mini的div</div>
    </div>
    <div class="one" id="two" title="test">
        id为two，class为one，title为test的div
        <div class="mini" title="other">class为mini，title为other的div</div>
        <div class="mini" title="test">class为mini，title为test的div</div>
    </div>
    <div class="one">
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini">class为mini的div</div>
        <div class="mini" title="tesst">class为mini,title为tesst的div</div>
    </div>
    <div style="display: none" class="none">style的dispaly为none的div</div>
    <div class="hide">class为hide的div</div>
    <span id="span1">^^span元素111^^</span>
    <div>
        包含input的type为hidden的div<input type="hidden" size="8">
    </div>
    <span id="span2">^^span元素222^^</span>
    <div id="mover">正在执行动画的div</div>
</body>
</html>
div,span,p{
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: 1px solid #000;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}
div.mini{
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}
div.hide{
    display: none;
}
$(function () {
    function anmateIt() {
        $("#mover").slideToggle("slow", anmateIt);
    }

    anmateIt();
});
$(function () {
    /**
     * er()选择索引值等于3的div元素
     */
    $("#btn01").click(function () {
        $("div").eq(3).css("background-color", "#bfa")
    });

    /**
     * first()选择第一个div元素
     */
    $("#btn02").click(function () {
        $("div").first().css("background-color", "#bfa");
    });

    /**
     * last()选择最后一个div元素
     */
    $("#btn03").click(function () {
        $("div").last().css("background-color", "#bfa");
    });

    /**
     * filter()在div中选择索引为偶数的
     */
    $("#btn04").click(function () {
        $("div").filter(":even").css("background-color", "#bfa");
    });

    /**
     * is()判断#one是否为:empty或:parent
     */
    $("#btn05").click(function () {
        alert($("#one").is(":empty"));
    });

    /**
     * has()选择div中包含.mini的
     */
    $("#btn06").click(function () {
        $("div").has(".mini").css("background-color", "#bfa");
    });

    /**
     * not()选择div中class不为one的
     */
    $("#btn07").click(function () {
        $("div").not(".one").css("background-color", "#bfa");
    });

    /**
     * children()在body中选择所有class为one的div子元素
     */
    $("#btn08").click(function () {
        $("body").children("div.one").css("background-color", "#bfa");
    });

    /**
     * find()在body中选择所有class为mini的div后代元素
     */
    $("#btn09").click(function () {
        $("body").find("div.mini").css("background-color", "#bfa");
    });

    /**
     * next()#one的下一个div
     */
    $("#btn10").click(function () {
        $("#one").next("div").css("background-color", "#bfa");
    });

    /**
     * nextAll()#one后面的所有span元素
     */
    $("#btn11").click(function () {
        $("#one").nextAll("span").css("background-color", "#bfa");
    });

    /**
     * nextUntil()#one和span之间的元素
     */
    $("#btn12").click(function () {
        $("#one").nextUntil("span").css("background-color", "#bfa");
    });

    /**
     * parent().mini的父元素
     */
    $("#btn13").click(function () {
        $(".mini").parent().css("background-color", "#bfa");
    });

    /**
     * prev()#two的上一个div
     */
    $("#btn14").click(function () {
        $("#two").prev("div").css("background-color", "#bfa");
    });

    /**
     * prevAll()span前面所有的div
     */
    $("#btn15").click(function () {
        $("span").prevAll("div").css("background-color", "#bfa");
    });

    /**
     * prevUntil()span向前直到#one的元素
     */
    $("#btn16").click(function () {
        $("span").prevUntil("#one").css("background-color", "#bfa");
    });

    /**
     * siblings()#two的所有兄弟元素
     */
    $("#btn17").click(function () {
        $("#two").siblings().css("background-color", "#bfa");
    });

    /**
     * add()选择所有的span元素和id为two的元素
     */
    $("#btn18").click(function () {
        $("span").add("#two").css("background-color", "#bfa");
    });
});

属性操作

①html([val|fn])        取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

②text([val|fn])           取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

③val([val|fn|arr])        获得匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性操作</title>
        <script src="https://code.jquery.com/jquery-1.7.2.js"
                integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
                crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="属性操作.js"></script>
    </head>
    <body>
        <!--
        <div>div标签<span>span标签</span></div>
        <input type="text" name="username" id="username" />
        <button>操作输入框</button>
        -->
        单选：
        <input name="radio" type="radio" value="radio01"/>radio01
        <input name="radio" type="radio" value="radio02"/>radio02
        <br/>
        多选：
        <input name="checkbox" type="checkbox" value="checkbox01"/>checkbox01
        <input name="checkbox" type="checkbox" value="checkbox02"/>checkbox02
        <input name="checkbox" type="checkbox" value="checkbox03"/>checkbox03
        <br/>
        下拉多选：
        <select id="multiple" multiple="multiple" size="4">
            <option value="mul01">mul01</option>
            <option value="mul02">mul02</option>
            <option value="mul03">mul03</option>
            <option value="mul04">mul04</option>
        </select>
        <br/>
        下拉单选：
        <select id="single">
            <option value="sin01">sin01</option>
            <option value="sin02">sin02</option>
            <option value="sin03">sin03</option>
        </select>
        <br/>
    </body>
</html>
$(function () {
   //不传参数是获取，传递参数是设置
   // alert($("div").html());
   // $("div").html("<h1>div中的标题1<h1/>")

    //不传参数是获取，传递参数是设置
    // alert($("div").text());
    // $("div").text("<h1>div中的标题1<h1/>");

    //不传参数是获取，传递参数是设置
    // $("button").click(function () {
    //     alert($("#username").val());
    //     $("#username").val("默认值");
    // });

    //批量操作单选
    // $(":radio").val(["radio01"]);
    //批量操作复选框
    // $(":checkbox").val(["checkbox01","checkbox03","checkbox02"]);
    //批量操作下拉多选框
    // $("#multiple").val(["mul01","mul03","mul02"]);
    //操作下拉单选框
    // $("#single").val(["sin03"]);

    $(":radio,:checkbox,#multiple,#single").val(["checkbox01","checkbox03","radio01","mul03","mul02","sin03"]);
});

④attr(name|pro|key,val|fn)     设置或返回被选元素的属性值，不推荐操作checked、readOnly、selected、disabled等。attr方法还可以操作非标准属性（自定义属性）。
⑤removeAttr(name)            从每一个匹配的元素中删除一个属性。1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false)；1.7版本在IE6下已支持删除disabled。
⑥prop(n|p|k,v|f)                     获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误。只推荐操作checked、readOnly、selected、disabled等。
⑦removeProp(name)           用来删除由.prop()方法设置的属性集。随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性操作02</title>
        <script src="https://code.jquery.com/jquery-1.7.2.js"
                integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
                crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="属性操作02.js"></script>
    </head>
    <body>
        多选：
        <input name="checkbox" type="checkbox" value="checkbox01"/>checkbox01
        <input name="checkbox" type="checkbox" value="checkbox02"/>checkbox02

    </body>
</html>
$(function () {
    //attr
    //alert( $(":checkbox:first").attr("name") ); //获取
    //$(":checkbox:first").attr("name","pero");   //设置
    //alert($(":checkbox").attr("checked"));      //返回undefined是一个错误

    //prop
    //alert($(":checkbox").prop("checked"));      //返回false
    //$(":checkbox:last").prop("checked",true);    //最后一个选中

    $(":checkbox:first").attr("fname","nano");
    alert($(":checkbox:first").attr("fname"));
});

全选、全部选、反选、提交提示测试代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
        <title>测试1</title>
        <script src="https://code.jquery.com/jquery-1.7.2.js"
                integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
                crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="测试1.js"></script>
    </head>
    <body>
        <form method="post" action="http://localhost:8080">
            爱好的运动：<input type="checkbox" id="checkedAllBox"/>全选/全不选
            <br/>
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="乒乓球"/>乒乓球
            <br/>
            <input type="button" id="checkedAllBtn" value="全  选"/>
            <input type="button" id="checkedNotBtn" value="全不选"/>
            <input type="button" id="checkedRevBtn" value="反  选"/>
            <input type="button" id="sendBtn" value="提  交"/>
        </form>
    </body>
</html>
$(function () {
    //全选/全不选
    $("#checkedAllBox").click(function () {
        //在事件的function函数中，this对象是当前正在响应时间的dom对象
        $(":checkbox").prop("checked",this.checked);
    });
   //全选
   $("#checkedAllBtn").click(function () {
       $(":checkbox").prop("checked",true);
   });
   //全不选
    $("#checkedNotBtn").click(function () {
        $(":checkbox").prop("checked",false);
    });
    //反选
    $("#checkedRevBtn").click(function () {
        $(":checkbox[name='items']").each(function () {
            //this对象为当前遍历到的dom对象
            this.checked = !this.checked;
        });
        //获取全部的球类个数
        var AllCount = $(":checkbox[name='items']").length;
        //获取选中的球类个数
        var checkedCount = $(":checkbox[name='items']:checked").length;
        // if (AllCount == checkedCount){
        //     $("#checkedAllBox").prop("checked",true);
        // }else {
        //     $("#checkedAllBox").prop("checked",false);
        // }
        $("#checkedAllBox").prop("checked",AllCount == checkedCount);
    });
    //提交
    $("#sendBtn").click(function () {
        $(":checkbox[name='items']:checked").each(function () {
            //this对象为当前遍历到的dom对象
            alert(this.value);
        });
    });
    //所有球类绑定点击事件
    $(":checkbox[name='items']").click(function () {
        var AllCount = $(":checkbox[name='items']").length;
        var checkedCount = $(":checkbox[name='items']:checked").length;
        $("#checkedAllBox").prop("checked",AllCount == checkedCount);
    });
});

Dom的增删改

内部插入
①append(content|fn)        向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
②appendTo(content)        把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。
③prepend(content|fn)        向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
④prependTo(content)        把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
外部插入
①after(content|fn)             在每个匹配的元素之后插入内容。
②before(content|fn)          在每个匹配的元素之前插入内容。
③insertAfter(content)       把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
④insertBefore(content)      把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法
包裹
①wrap(html|ele|fn)              把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replac把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。eAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
②unwrap()                        这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
③wrapAll(html|ele)          将所有匹配的元素用单个元素包裹起来。这于 '.wrap()'<a href="https://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
④wrapInner(html|ele|fn)        将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
替换
①replaceWith(content|fn)     将所有匹配的元素替换成指定的HTML或DOM元素。
②replaceAll(selector)           用匹配的元素替换掉所有 selector匹配到的元素。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。
删除
①empty()                                删除匹配的元素集合中所有的子节点。
②remove([expr])                    从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
③detach([expr])                     从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
复制
①clone([Even[,deepEven]])    克隆匹配的DOM元素并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html" charset="UTF-8">
      <title>dom的增删改</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="dom的增删改.js"></script>
  </head>
  <body>
    <div>
      my name is pero
    </div>
  </body>
</html>
$(function () {
    //把标题1插入到div中，并放置在最后的位置
    $("div").append("<h1>标题1</h1>");
    //把标题2插入到div中，并放置在最后的位置
    $("<h2>标题2</h2>").appendTo("div");
    //把标题3插入到div中，并放置在最前的位置
    $("div").prepend("<h3>标题3</h3>");
    //把标题4插入到div中，并放置在最前的位置
    $("<h4>标题4</h4>").prependTo("div");
    //把标题5插入到div外部，并放置在之前的位置
    $("<h5>标题5</h5>").insertAfter("div");
    //把标题5插入到div外部，并放置在之后的位置
    $("<h6>标题6</h6>").insertBefore("div");
    //把整个div全部替换成为标题1
    //$("div").replaceWith($("<h1>标题1</h1>"));
    //把标题1替换成整个div
    //$("<h1>标题1</h1>").replaceAll($("div"));
    //删除标签
    //$("div").remove();
    //清空标签中的子节点
    $("div").empty();
});

多选下拉列表内容传递测试

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>测试2</title>
    <link rel="stylesheet" href="测试2.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="测试2.js"></script>
  </head>
  <body>
    <div id="left">
      <select multiple="multiple" name="sel01">
        <option value="opt01">选项1</option>
        <option value="opt02">选项2</option>
        <option value="opt03">选项3</option>
        <option value="opt04">选项4</option>
        <option value="opt05">选项5</option>
        <option value="opt06">选项6</option>
        <option value="opt07">选项7</option>
        <option value="opt08">选项8</option>
      </select>

      <button>选中添加到右边</button>
      <button>全部添加到右边</button>
    </div>
    <div id="right">
      <select multiple="multiple" name="sel02">
      </select>
      <button>选中添加到左边</button>
      <button>全部添加到左边</button>
    </div>
  </body>
</html>
select{
    width: 100px;
    height: 140px;
}
div{
    width: 130px;
    float: left;
    text-align: center;
}
$(function () {
    //第一个按钮：选中添加到右边
   $("button:eq(0)").click(function () {
       $("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"));
   });
    //第二个按钮：全部添加到右边
   $("button:eq(1)").click(function () {
       $("select[name='sel01'] option").appendTo($("select[name='sel02']"));
   });
    //第三个按钮：选中添加到左边
    $("button:eq(2)").click(function () {
        $("select[name='sel02'] option:selected").appendTo($("select[name='sel01']"));
    });
    //第四个按钮：全部添加到左边
    $("button:eq(3)").click(function () {
        $("select[name='sel02'] option").appendTo($("select[name='sel01']"));
    });
});

动态添加和删除行记录测试

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
        <title>测试3</title>
        <link rel="stylesheet" href="测试3.css">
        <script src="https://code.jquery.com/jquery-1.7.2.js"
                integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
                crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="测试3.js"></script>
    </head>
    <body>
        <table id="employeeTable">
            <tr>
                <th>姓名：</th>
                <th>邮箱：</th>
                <th>薪资：</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>Jack</td>
                <td>jack@qq.com</td>
                <td>7000</td>
                <td><a href="deleteEmp?id=001">删除</a></td>
            </tr>
            <tr>
                <td>Lucy</td>
                <td>lucy@sina.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=002">删除</a></td>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@wechat.com</td>
                <td>9000</td>
                <td><a href="deleteEmp?id=003">删除</a></td>
            </tr>
            <tr>
                <td>Pero</td>
                <td>pero@outlook.com</td>
                <td>10000</td>
                <td><a href="deleteEmp?id=004">删除</a></td>
            </tr>
        </table>

        <div id="formDiv">
            <h4>添加新员工</h4>

            <table>
                <tr>
                    <td class="word">姓名：</td>
                    <td class="inp">
                        <input type="text" name="empName" id="empName"/>
                    </td>
                </tr>
                <tr>
                    <td class="word">邮箱：</td>
                    <td class="inp">
                        <input type="text" name="email" id="email"/>
                    </td>
                </tr>
                <tr>
                    <td class="word">薪资：</td>
                    <td class="inp">
                        <input type="text" name="salary" id="salary"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button id="addEmpButton" value="val">
                            添加
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
table{
    border-collapse: collapse;
}
table,th,td{
    border: 1px solid black;
}
$(function () {
    //复用的删除行函数
    var deleteFun = function () {
        //在事件响应function函数中，有一个this对象，该对象是当前正在响应事件的dom对象
        //获取行对象
        var $trObj = $(this).parent().parent();
        var name = $trObj.find("td:first").text();
        /**
         * confirm是JS提供的一个确认提示框函数，提示信息为传入参数
         * 点击确定返回true，点击取消返回false
         */
        if (confirm("确定要删除[" + name + "]吗？")) {
            $trObj.remove();
        }
        //return false阻止元素默认行为
        return false;
    }
    //创建添加
    $("#addEmpButton").click(function () {
        var name = $("#empName").val();
        var email = $("#email").val();
        var salary = $("#salary").val();
        var $trObj = $("<tr>" +
            "<td>" + name + "</td>\n" +
            "<td>" + email + "</td>" +
            "<td>" + salary + "</td>" +
            "<td><a href=\"deleteEmp?id=004\">删除</a></td>" +
            "</tr>");
        $trObj.appendTo($("#employeeTable"));
        //deleteFun()是函数调用，获取的是函数的返回值
        //deleteFun是调用函数，获取的是函数
        $trObj.find("a").click(deleteFun);
    });
    //创建删除
    $("a").click(deleteFun);
});

CSS样式操作

①addClass(class|fn)                        为每个匹配的元素添加指定的类名。
②removeClass([class|fn])                从所有匹配的元素中删除全部或者指定的类。
③toggleClass(class|fn[,sw])             如果存在（不存在）就删除（添加）一个类。
④offset([coordinates])                      获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式操作</title>
        <link rel="stylesheet" href="CSS样式操作.css">
        <script src="https://code.jquery.com/jquery-1.7.2.js"
                integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
                crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="CSS样式操作.js"></script>
    </head>
    <body>

        <table align="center">
            <tr>
                <td>
                    <div class="border">
                    </div>
                </td>
                <td>
                    <div class="btn">
                        <input type="button" value="addClass()" id="btn01"/>
                        <input type="button" value="removeClass()" id="btn02"/>
                        <input type="button" value="toggleClass()" id="btn03"/>
                        <input type="button" value="offset()" id="btn04"/>
                    </div>
                </td>
            </tr>
        </table>


    </body>
</html>
div{
    width: 100px;
    height: 260px;
}

div.whiteBorder{
    border: 2px solid white;
}

div.redDiv{
    background-color: red;
}

div.blueBorder{
    border: 5px solid blue;
}
$(function () {
    var $divEle = $("div:first");

    //addClass() 向被选元素添加一个或多个类
    $("#btn01").click(function () {
        $divEle.addClass("redDiv blueBorder");
    });

    //removeClass() 从被选元素删除一个或多个元素
    $("#btn02").click(function () {
        $divEle.removeClass("redDiv blueBorder");
    })

    //toggleClass() 对被选元素进行添加/删除类的切换操作
    $("#btn03").click(function () {
        $divEle.toggleClass("redDiv blueBorder");
    });

    //offset() 返回第一个匹配元素相对于文档的位置
    $("#btn04").click(function () {
        var pos = $divEle.offset();
        console.log(pos);
        $divEle.offset({
            top: 20,
            left: 30
        });
    });
});

JQuery动画操作

①show([s,[e],[fn]])                显示隐藏的匹配元素。这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
②hide([s,[e],[fn]])                 隐藏显示的元素。这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
③toggle([s],[e],[fn])              用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。1.9版本 .toggle(function, function, … ) 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
④fadeIn([s],[e],[fn])             通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
⑤fadeOut([s],[e],[fn])          通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
⑥fadeTo([[s],o,[e],[fn]])       把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
⑦fadeToggle([s,[e],[fn]])     通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html" charset="UTF-8">
      <title>动画</title>
      <link rel="stylesheet" href="动画.css">
      <script src="https://code.jquery.com/jquery-1.7.2.js"
              integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
              crossorigin="anonymous">
      </script>
      <script type="text/javascript" src="动画.js"></script>
  </head>
  <body>
    <table style="...">
        <tr>
            <td><button id="btn01">显示show()</button></td>
        </tr>
        <tr>
            <td><button id="btn02">隐藏hide()</button></td>
        </tr>
        <tr>
            <td><button id="btn03">显示/隐藏切换toggle()</button></td>
        </tr>
        <tr>
            <td><button id="btn04">淡入fadeIn()</button></td>
        </tr>
        <tr>
            <td><button id="btn05">淡出faceOut()</button></td>
        </tr>
        <tr>
            <td><button id="btn06">淡化到fadeTo()</button></td>
        </tr>
        <tr>
            <td><button id="btn07">淡化切换fadeToggle()</button></td>
        </tr>
    </table>
    <div id="div1" style="...">
        JQuery定义了许多动画效果，很方便使用
    </div>
  </body>
</html>
#div1{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    background-color: lightblue;
    float: left;
}
table,tr,td{
    border: 1px solid black;
    border-collapse: collapse;
}

$(function () {
    //show()
    $("#btn01").click(function () {
        //第一个参数，执行动画的时间；
        // 第二个参数，动画的回调函数(动画完成后调用的函数)
        $("#div1").show(1000, function () {
            alert("show动画执行完成");
        });
    });
    //hide()
    $("#btn02").click(function () {
        $("#div1").hide(1000, function () {
            alert("hide动画执行完成");
        });
    });
    //toggle()
    $("#btn03").click(function () {
        $("#div1").toggle(1000, function () {
            alert("toggle动画执行完成");
        });
    });
    // var toggleFun = function () {
    //     $("#div1").toggle(1000,toggleFun);
    // }
    // toggleFun();

    //fadeIn()
    $("#btn04").click(function () {
        $("#div1").fadeIn(1000, function () {
            alert("fadeIn动画执行完成");
        });
    });
    //fadeOut()
    $("#btn05").click(function () {
        $("#div1").fadeOut(2000, function () {
            alert("fadeOut动画执行完成");
        });
    });
    //fadeTo()
    $("#btn06").click(function () {
        $("#div1").fadeTo(2000,0.5,function () {
            alert("fadeTo动画执行完成");
        })
    });
    //fadeToggle
    $("#btn07").click(function () {
        $("#div1").fadeToggle(2000,function () {
            alert("fadeToggle动画完成");
        })
    });
});

品牌展示测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>品牌展示</title>
    <link rel="stylesheet" href="品牌展示.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="品牌展示.js"></script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a><i>(30440)</i></li>
        <li><a href="#">索尼</a><i>(27220)</i></li>
        <li><a href="#">三星</a><i>(20808)</i></li>
        <li><a href="#">尼康</a><i>(17821)</i></li>
        <li><a href="#">松下</a><i>(12289)</i></li>
        <li><a href="#">卡西欧</a><i>(8242)</i></li>
        <li><a href="#">富士</a><i>(14894)</i></li>
        <li><a href="#">柯达</a><i>(9528)</i></li>
        <li><a href="#">宾得</a><i>(2195)</i></li>
        <li><a href="#">理光</a><i>(4114)</i></li>
        <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
        <li><a href="#">明基</a><i>(1466)</i></li>
        <li><a href="#">爱国者</a><i>(3091)</i></li>
        <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
    </div>
</div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
    text-align: center;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: #F50;
    text-decoration: underline;
}

.SubCategoryBox {
    width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}

.SubCategoryBox ul {
    list-style: none;
}

.SubCategoryBox ul li {
    display: block;
    float: left;
    width: 200px;
    line-height: 20px;
}

.showmore, .showless {
    clear: both;
    text-align: center;
    padding-top: 10px;
}

.showmore a, .showless a {
    display: block;
    width: 120px;
    margin: 0 auto;
    line-height: 24px;
    border: 1px solid #AAA;
}

.showmore a span {
    padding-left: 15px;
    background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
    padding-left: 15px;
    background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
    color: #F50;
}
$(function () {
    //初始显示状态
    $("li:gt(5):not(:last)").hide();
    //折叠
    $("a:last").click(function () {
        $("li:gt(5):not(:last)").toggle();
        //判断可见性
        if ($("li:gt(5):not(:last)").is(":hidden")) {
            $("a:last span").text("显示全部品牌");
            $("div:last").removeClass();
            $("div:last").addClass("showmore");

            //去高亮
            $("li:contains('佳能')").removeClass("promoted")
        }else {
            $("a:last span").text("显示精简品牌");
            $("div:last").removeClass();
            $("div:last").addClass("showless");

            //加高亮
            $("li:contains('佳能')").addClass("promoted")
        }
        return false;
    });

});

JS和JQuery页面加载完成后的区别

触发顺序：JQuery页面加载完成之后先执行，JS页面加载完成执行在JQuery之后。
触发时间：①JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好Dom对象之后就会马上执行。
                 ②原生JS的页面加载完成之后，除了要等浏览器内核解析完成标签创建好Dom对象，还要等标签显示需要的内容加载完成。
执行次数：①JQuery的页面加载完成之后，是全部把注册的function函数依次按顺序全部执行。
                 ②原生JS的页面加载完成之后，只会执行最后一次的赋值函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS和JQuery页面加载完成后的区别</title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="原生JS和JQuery页面加载完成后的区别.js"></script>
</head>
<body>
    <button>按钮</button>
    <iframe src="https://www.baidu.com"></iframe>
    <img src="https://www.baidu.com.1.jpg"/>
</body>
</html>
/**
 * 触发顺序：JQuery页面加载完成之后先执行，JS页面加载完成执行在JQuery之后
 * 触发时间：①JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好Dom对象之后就会马上执行
 *          ②原生JS的页面加载完成之后，除了要等浏览器内核解析完成标签创建好Dom对象，还要等标签显示需要的内容加载完成
 * 执行次数：①JQuery的页面加载完成之后，是全部把注册的function函数依次按顺序全部执行。
 *          ②原生JS的页面加载完成之后，只会执行最后一次的赋值函数
 */
window.onload = function () {
    alert("原生JS的页面加载完成--1")
}
window.onload = function () {
    alert("原生JS的页面加载完成--2")
}
window.onload = function () {
    alert("原生JS的页面加载完成--3")
}
//JQuery页面加载完整代码：
// $(document).ready(function () {
//
// });
$(function () {
    alert("JQuery的页面加载完成--1")
})
$(function () {
    alert("JQuery的页面加载完成--2")
})
$(function () {
    alert("JQuery的页面加载完成--3")
})

JQuery中其他事件处理方法

click([[data],fn])                触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

mouseover([[data],fn])     当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout([[data],fn])       当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

bind(type,[data],fn)          为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法，请用 on()代替。

one(type,[data],fn)            为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。多数情况下，可以把事件处理函数定义为匿名函数。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数）。

live(type, [data], fn)          jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

unbind(type,[data|fn]])      bind()的反向操作，从每一个匹配的元素中删除绑定的事件。jQuery 3.0中已弃用此方法，请用 off()代替。如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中其他的事件处理方法</title>
    <link rel="stylesheet" type="text/css" href="JQuery中其他的事件处理方法.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="JQuery中其他的事件处理方法.js"></script>
</head>
<body>
  <div id="panel">
      <h5 class="head">什么是jQuery</h5>
      <div class="content">
        JQuery是继Prototype之后又一个优秀的JavaScript库，他是一个由John Resig创建与2006年1月的1开源项目。
      </div>
      <button>按钮</button>
  </div>
</body>
</html>
h5.head {
    height: 23px;
    width: 150px;
    background: lightblue;
    margin: auto;
}

div.content {
    display: none;
    margin: auto;
    width: 300px;
    height: 23px;
    background-color: lightcyan;
}

$(function () {
    // $("h5").click(function () { //传入function是绑定事件
    //    alert("h5单击事件click方法绑定");
    // });

    // $("button").click(function () {
    //    $("h5").click(); //不传入参数function时触发事件
    // });

    //鼠标移入
    // $("h5").mouseover(function () {
    //     console.log("鼠标移入")
    // })
    // //鼠标移出
    // $("h5").mouseout(function () {
    //     console.log("鼠标移出")
    // })

    //使用bind绑定事件
    // $("h5").bind("click mouseout mouseover",function () {
    //     console.log("这是bind绑定的click事件");
    // })

    //使用one绑定事件，事件只执行一次
    // $("h5").one("click mouseout mouseover",function () {
    //     console.log("这是bind绑定的click事件")
    // })

    //使用unbind解除事件的绑定
    // $("h5").unbind("click mouseover");

    //使用live()绑定事件，用来绑定选择器匹配的所有元素的事件，就算该元素是后面动态创建出来的也有效
    $("h5").live("click",function (){
        alert("h5单击事件live()方法绑定");
    });
    $("<h5 class='head'>what is jQuery?</h5>").appendTo($("#panel"));
});

事件冒泡

父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应，在子元素绑定的函数中return false即可阻止函数冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <link rel="stylesheet" type="text/css" href="事件冒泡.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="事件冒泡.js"></script>
</head>
<body>
    <div id="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div>
    <div id="msg"></div>
    <br/><br/>
    <a href="https://www.baidu.com">www.baidu.com</a>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 13px;
    line-height: 130%;
    padding: 60px;
}
#content{
    width: 220px;
    border: 1px solid #0050D0;
    background: #96E555;
}
span{
    width: 200px;
    margin: 10px;
    background: #666;
    cursor: pointer;
    color: white;
    display: block;
}
p{
    width: 200px;
    background: #888;
    color: white;
    height: 16px;
}
$(function () {
    $("#content").click(function () {
       alert("div");
    });
    //在子元素绑定的函数中return false即可阻止函数冒泡
    $("span").click(function () {
        alert("span");
        return false;
    })
})

事件对象

事件对象是封装有触发的事件信息的一个JavaScript对象。在给定元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名称为event。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>事件对象</title>
    <link rel="stylesheet" type="text/css" href="事件对象.css">
    <script src="https://code.jquery.com/jquery-1.7.2.js"
            integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
            crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="事件对象.js"></script>
</head>
<body>
  <div id="areaDiv"></div>
  <div id="showMsg"></div>
</body>
</html>
#areaDiv{
    border: 1px solid black;
    width: 300px;
    height: 50px;
    margin-bottom: 10px;
}

#showMsg{
    border: 1px solid black;
    width: 300px;
    height: 20px;
}
//原生JS获取事件对象
// window.onload = function () {
//     document.getElementById("areaDiv").onclick = function (event) {
//         console.log(event);
//     }
// }

//JQuery获取事件对象
$(function () {
    // $("#areaDiv").click(function (event) {
    //     console.log(event);
    // });
    $("#areaDiv").bind("mouseover mouseout",function (event) {
        //event的type属性可以知晓当前调用的是何函数
        // console.log(event);
        if (event.type == "mouseover"){
            console.log("鼠标移入");
        }
        if (event.type == "mouseout"){
            console.log("鼠标移出");
        }
    })
})

图片跟随测试

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
        <title>图片跟随</title>
        <link rel="stylesheet" type="text/css" href="图片跟随.css">
      <script src="https://code.jquery.com/jquery-1.7.2.js"
              integrity="sha384-Gl//isQXKKMMPFV3gTicE8EHoQe7cPVyozWp5Wsz6jAJr4XYlbZn5ZY2H1uiYGAA"
              crossorigin="anonymous">
      </script>
      <script type="text/javascript" src="图片跟随.js"></script>
    </head>
    <body>
      <img id="small" src="img/up.png"/>
      <div id="showBig">
          <img src="img/down.png">
      </div>
    </body>
</html>
body{
    text-align: center;
}
#small{
    margin-top: 150px;
}
#showBig{
    position: absolute;
    display: none;
}
$(function () {
    $("#small").bind("mouseover mouseout mousemove", function (event) {
        if (event.type == "mouseover") {
            $("#showBig").show();
        }else if (event.type == "mouseout") {
            $("#showBig").hide();
        }else if(event.type == "mousemove") {
            console.log(event);
            $("#showBig").offset({
                left: event.pageX + 10,
                top: event.pageY + 10
            });
        }
    });
});

Neo丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
04-javaWeb-jQuery.7z
07-02
jQuery jquery中效果 案例1-弹出广告 选择器总结 案例2-隔行换色 属性和css操作总结 对属性的操作 对css操作 案例3-全选或者全不选 jQuery数据遍历、val设置、标签设置、元素创建  案例4-省市联动 选择...
02-javaweb-08-JQuery.doc
10-14
02-javaweb-08-JQuery.doc
jQuery
xglfire的博客
06-27 238
jQuery
英文单词缩写建议
lyndon
08-31 2408
https://github.com/dablelv/identifier-abbr
javaweb学习（day12-jQuery)
最新发布
weixin_51580177的博客
04-23 1019
jquery就是简化了dom的操作，也确实很方便
java后端快速入门jQuery
weixin_50861894的博客
08-11 164
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。获取属性语法attr(''属性'') // 类似原生 getAttribute()设置属性语法attr(''属性'', ''属性值'') // 类似原生 setAttribute()
【Java 进阶篇】JQuery 遍历 —— For 循环的奇妙之旅
繁依Fanyi的博客
11-16 787
for循环是一种在 JQuery 中遍历元素的基本方式，但在处理 JQuery 对象时，使用each()方法和其他遍历方法更为灵活和方便。了解这些遍历方法，可以让你更加高效地操作页面上的元素，提升前端开发的体验。在实际项目中，选择合适的遍历方式取决于具体的需求。无论是简单的for循环还是强大的each()方法，都是你工具箱中的有用工具。希望通过本文的介绍，你对 JQuery 遍历有了更加深入的理解，能够更加灵活地运用它们。在前端的征途上，愿你的遍历之旅充满奇妙和愉悦。加油吧，少年！作者信息。
JavaWeb学习总结（四）jQuery
long3359的博客
03-18 369
JavaWeb学习总结（四）jQuery
javaweb-QQZONE-JavaWeb.zip
10-24
- 前端开发可能包括HTML、CSS和JavaScript，配合库如jQuery和框架如Vue.js或React.js，实现动态交互和美观的用户界面。在QQZONE项目中，前端技术可能用于构建用户友好的社交功能。 9. **AJAX（Asynchronous ...
JavaWeb-easyUI-main-page
03-26
在JavaWeb开发中，EasyUI是一个非常流行的前端框架，它基于jQuery，提供了丰富的组件和精美的界面设计，使得开发者能够快速构建出响应式且用户体验良好的Web应用。标题"JavaWeb-easyUI-main-page"暗示了我们正在讨论...
javaweb-社区团购系统.zip
03-21
【标题】"javaweb-社区团购系统.zip" 暗示了这是一个基于JavaWeb技术构建的社区团购系统的源代码包。在JavaWeb开发中，我们通常会涉及到一系列的技术栈和概念，包括但不限于Servlet、JSP、JavaBean、MVC模式、数据库...
java使用jquery登录例子
08-03
java使用jquery登录例子 简单，容易上手 java使用jquery登录例子 简单，容易上手
jquery与java的关系_Jquery就是这么简单
weixin_33999969的博客
02-17 701
什么是Jquery？Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作就是封装了JavaScript，能够简化我们写代码的一个JavaScript库为什么要使用Jquery？我觉得非常重要的理由就是：它能够兼容市面上主流的浏览器，我们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不一样的，而Jquery能够屏蔽掉这些不兼容的东西...(1...
Java研学-jQuery(一)
zhlyxx的博客
03-18 938
jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。jQuery 最常用，最简单选择器，通过元素的 id、class 或标签等查找元素。在网页中，每个 id 名称只能使用一次[0, 1]，class 允许重复使用 [0, n]。若想通过 DOM 元素之间的层次关系(DOM结构)来获取特定元素，例如后代元素，子元素， 相邻元素，兄弟元素等，需使用层次选择器。
JQuery(适用于Java学者)
boilll的博客
02-02 410
适用于Java学者
JavaWeb --- jQuery
乌云的博客
03-05 573
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。它的核心思想是write less，do more（写得更少，做得更多），所以它实现了很多浏览器的兼容问题。jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOIL元素、制作动画效果、事件处理、使用Ajax以及其他功能。
JavaWeb——jQuery的常用操作(1)
i_am_handsome_的博客
11-12 184
jQueryjQuery简介jQuery的核心函数 $()$()函数的常用参数jQuery对象jQuery 选择器基本选择器层级选择器过滤选择器基本过滤器内容过滤器属性过滤器表单过滤器表单对象过滤器jQuery元素筛选 jQuery简介 含义：jQuery，是简化了的JavaScript，也就是JavaScript 和查询（Query），它就是辅助JavaScript 开发的js 类库。 核心思想：write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery的
JAVA--JQuery
鄢秋实的博客
01-18 857
Web代码： 测试1（helloJQ）： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JQuery&lt;/title&gt; &lt;Script src="js/jqu
idea javaweb项目导入jquery
08-12
对于IDEA导入JavaWeb项目，并使用jQuery，可以按照以下步骤进行操作： 1. 首先，在IDEA中创建一个JavaWeb项目。可以通过File -> New -> Project -> Java (勾选Web Application)来创建。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [IDEA搭建JavaWeb项目，JDBC和Servlet-JSP技术实现注册功能](https://blog.csdn.net/l_zl2021/article/details/126503684)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [解决IDEA导入javaWeb项目注解爆红的问题](https://blog.csdn.net/weixin_28908857/article/details/112824303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值