zoukankan html css js c++ java

jQuery引入

jQuery的介绍

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库(这里的兼容性主要是针对以前的IE浏览器来说的，因为当时的IE浏览器不兼容，但是现在基本所有的浏览器都能实现兼容)

2、jQuery 使用户能够更方便的处理 HTML Document、Events、实现动画效果、方便的进行 Ajax 交互，能够极大地简化 JavaScript 编程。它的宗旨就是：" Write less, do more."

jQuery 的优势：

1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面的加载速度。

2、丰富的DOM选择器，jQuery 的选择器用起来很方便，比如要找到某个DOM对象的相邻元，js 可能要写好几行代码，而jQuery一行代码就可以搞定，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3、链式表达式。jQuery的链式操作可以把多个操作写在一行代码中，更加简洁。

4、事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

5、Ajax 操作支持。jQuery简化了Ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

6、跨浏览器兼容。jQuery 基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7、插件扩展开发。jQuery 有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等基本前端页面上的组件都有对应的插件，并且用jQuery插件做出来的效果很炫，且可以根据自己的需要去改写和封装插件，简单实用。

jQuery 包含以下内容：

1、选择器

2、筛选器

3、样式操作

4、文本操作

5、属性操作

6、文档操作

7、事件

8、动画效果

9、插件

10、each、data、Ajax

jQuery 选择

x: 兼容IE678，使用最为广泛的，官方只做bug维护，功能不再新增。因此一般项目来说，使用1.x版本就可，最终版本：1.12.4（2016年5月20日）
2.x：不兼容 IE678，很少人使用，官方只做bug维护，功能不再新增。如果不考虑兼容低的浏览器可以使用2.x，最终版本：2.2.4（2016年5月20日）
3.x：不兼容 IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x 版。目前该版本是官方主要更新维护的版本。

维护 IE678 是一件让人头疼的事情，一般我们都会额外加载一个 css 和 JS 单独处理。值得庆幸的是使用这些浏览器的人也在逐步减少，pc 端用户已经逐步被移动端用户取代，如果没有特殊的要求的话，一般会选择放弃对 678 的支持。

jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法：例如$("#i1").html()

$("#i1").html() 的意思是：获取 id 值为 i1 的元素的 html 代码。其中html() 是jQuery 里的方法。

相当于：document.getElementBYId("i1").innerHTML;

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

一个约定，我们在声明一个 jQuery 对象变量的时候在变量名前面加上$:

var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]   // jQuery 对象转换成 DOM 对象

拿上面那个例子举例，jQuery 对象和 DOM 对象的使用：

$("#i1").html();  // jQuery 对象可以使用jQuery 的方法
$("#i1")[0].innerHTML;  // DOM 对象使用 DOM 的方法

jQuery 基础语法

$(selector).action()

选择器

id 选择器：

$("#id")

标签选择器：

$("tagName")  // 直接通过标签名来查找

class 选择器：

$(".className")  // 通过 .类名 来查找

所有元素选择器：

$("*")  // * 是通用匹配

组合选择器：

$("#id,.className,tagName")  // 各个查找条件之间是通过“,” 来分隔的，且不要打空格

层级选择器：

x 和 y 可以为任意选择器

$("x y");  // x 和 y是通过空格来连接的，在 x 的所有后代中查找 y 
$("x>y");  // 在 x 的所有儿子中查找 y
$("x + y");   // 找到所有紧挨在 x 后面的 y
$("x~y");  // 找到的是 x 之后所有的兄弟 y

练习：

1、找到本页面中id是i1的标签

2、找到本页面中所有的h2标签

3、找到本页面中所有的input标签

4、找到本页面所有样式类中有c1的标签

5、找到本页面所有样式类中有btn-default的标签

6、找到本页面所有样式类中有c1的标签和所有h2标签

7、找到本页面所有样式类中有c1的标签和id是p3的标签

8、找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

// 1、找到本页面中id是i1的标签
$("#i1")

//2、找到本页面中所有的h2标签
$("#h2")

// 3、找到本页面中所有的input标签
$("input")

// 4、找到本页面所有样式类中有c1的标签
$(".c1")

// 5、找到本页面所有样式类中有btn-default的标签
$(".btn-default")

// 6、找到本页面所有样式类中有c1的标签和所有h2标签
$(".c1,h2")

// 7、找到本页面所有样式类中有c1的标签和id是p3的标签
$(".c1,#p3")

// 8、找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
$(".c1,.btn")

练习：

1、找到本页面中form标签中的所有input标签

2、找到本页面中被包裹在label标签内的input标签

3、找到本页面中紧挨在label标签后面的input标签

4、找到本页面中id为p2的标签后面所有和它同级的li标签

// 1、找到本页面中form标签中的所有input标签
$("form input")

// 2、找到本页面中被包裹在label标签内的input标签
$("label>input")

// 3、找到本页面中紧挨在label标签后面的input标签
$("label+input")

// 4、找到本页面中id为p2的标签后面所有和它同级的li标签
$("label~input")

基本筛选器：

:first       // 第一个
:last       // 最后一个

:eq(index)     // 索引等于 index 的那个元素
:even            // 匹配所有索引值为偶数的元素，从0开始计数
:odd              // 匹配所有索引值为奇数的元素，从0开始计数
:gt(index)      // 匹配所有大于给定索引值的元素
:lt(index)       // 匹配所有小于给定索引值的元素

:not(元素选择器)        // 找到所有满足not条件的标签

:has(元素选择器)        // 选取所有包含一个或多个标签在其内的标签（指的是从后代元素中找）

例子：

$("div:has(h1)")  // 找到所有后代中有 h1 标签的 div 标签
$("div:has(.c1)")  // 找到所有后代中有 c1 样式类的 div 标签
$("li:not(.c1)")  // 找到所有不包含 c1 class 的 li 标签
$("li:not(:has(a))")  // 找到所有后代中不含 a 标签的 li 标签

注意：

1、这里的 has 和 not 不是简单的有和没有的意思，它两没啥关系（不是一组）

2、:not 和 :has 通常用 .not() 和 .has() 代替

3、$("div:has(.c1)") 等价于 $("div .c1") 并不等价于 $("div.c1")。

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹出模态框</title>
 6     <style>
 7         .cover {
 8             position:fixed;
 9             left:0;
10             right:0;
11             top:0;
12             bottom:0;
13             background-color:darkgray;
14             z-index:999;
15         }
16         .model {
17             position:fixed;
18             600px;
19             height:400px;
20             left:50%;
21             top:50%;
22             background-color: white;
23             margin-left:-300px;
24             margin-top:-200px;
25             z-index:1000;
26         }
27         .hide {
28             display:none;
29         }
30     </style>
31 </head>
32 <body>
33 
34 <input type="button" value="弹" id="i0">
35 <div class="cover hide"></div>
36 <div class="model hide">
37     <label for="i1">姓名</label>
38     <input id="i1" type="text">
39     <label for="i2">爱好</label>
40     <input id="i2" type="text">
41     <input type="button" id="i3" value="关闭">
42 </div>
43 
44 <script src="jquery-3.2.1.min.js"></script>
45 <script>
46     var tButton=$("#i0");
47     tButton.on("click",function () {
48         var coverEle=$(".cover")[0];
49         var modelEle=$(".model")[0];
50         $(coverEle).removeClass("hide");
51         $(modelEle).removeClass("hide");
52     });
53     var cButton=$("#i3");
54     cButton.on("click",function () {
55         var coverEle=$(".cover")[0];
56         var modelEle=$(".model")[0];
57         $(coverEle).addClass("hide");
58         $(modelEle).addClass("hide");
59     })
60 </script>
61 
62 
63 </body>
64 </html>

自定义弹出模态框

属性选择器：

[attribute]
[attribute=value]  // 属性等于
[sttribute!=value]  // 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">

$("input[type='checkbox']");  // 取到 checbox 类型的 input 标签
$("input[type!='text']");  // 取到类型不是 text 的 input 标签

表单常用筛选：

:text
:password
:file
:radio
:checked

:submit
:reset
button

例子：

$(":checkbox")   // 找到所有的checkbox

表单对象属性：

:enabled
:disabled
:checked
:selected

例子：

<form action="">
    <input name="email" disabled="disabled">
    <input name="id">
</form>

$("input:enabled");  // 找到可用的input标签

<select id="s1">
    <option value="beijing">北京</option>
    <option value="shanghai">上海市</option>
    <option value="guangzhou" selected>广州市</option>
    <option value="shenzhen">深圳市</option>
</select>


$(":selected")  // 找到所有被选中的option

筛选器

下一个元素：

$("#id1").next  // 找紧挨着指定id1之后的一个id
$("#id1").nextAll  // 找指定id1之后的所有id
$("#id1"),nextUntil("#id2")  // 从id1 开始一直找到id2为止，且不包含id2

上一个元素：

$("#id1").prev()  // 查找紧挨id1之前的一个id
$("#id1").prevAll()   // 查找id1之前的所有的id 
$("#id1").prevUntil("#id2")  // 查找id1之前的id知道找到id2为止，但是不包含id2

父亲元素：

$("#id1").parent()  // 查找当前id1的父亲元素
$("#id1").parents() // 查找当前元素的所有父辈元素
$("#id1").parentsUntil("id2")  // 查找当前元素的所有父辈元素直到找到id2为止，且不包含id2

儿子和兄弟元素：

$("#id1").childern();  // 儿子们
$("#id1").sibling();  // 兄弟们

例子：

$("li").eq(2)   // 找出li标签中索引大于2的元素
$("li").first()   // 找出li标签中的第一个元素
$("ul li").hasclass("test")  // 找出ul后代li中有test类的元素

$(".test").next()  // 找出紧挨test类之后的类
$(".test").nextAll()  // 找出test类之后的所有类
$(".test").nextUntil()  // 找出test类之后的类直到找到匹配的类为止

$("div").children(".test")  // 在div 的子标签中找到有test类的子标签
$("div").find(".test")  // 在所有的div标签中找含有test类的标签

$("div").prev()  // 找出紧挨着div之前的一个类
$("div").prevAll()  // 找出div之前的所有的类
$("div").prevUntil()  // 找出div之前的类，直到找到匹配的类为止

$(".test").parent()  // 找出.test的父标签
$(".test").partents()  // 找出.test的所有父标签
$(".test").parentUntil()  // 找出.test的父标签，直到找到匹配的为止

$("div").siblings()  // 找到div标签的兄弟标签

查找元素：

$("#id1").find()  // 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。在不知道各个元素之间的层级关系的时候可以使用。

补充：

.first()  // 获取匹配的第一个元素。
.last()  // 获取匹配的最后一个元素。
.not()  // 从匹配元素的集合中删除与指定表达式匹配的元素。
.has()  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

示例：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单-jQuery</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
             20%;
            background-color: darkgrey;
            height: 100%;
        }
        .right {
             80%;
        }
        .title {
            text-align: center;
            padding: 10px 15px;
            border-bottom: 1px solid red;
        }
        .content {
            background-color: #336699;
        }
        .content > div {
            padding: 10px;
            color: white;
            border-bottom: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="left">
    <div class="item">
        <div class="title" id="t1">菜单一</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" id="t2">菜单二</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" id="t3">菜单三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
</div>
<div class="right"></div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    var $titleEles=$(".title");
    $titleEles.on("click",function (){
        $(this).next().toggleClass("hide").parent().siblings(".item").children(".content").addClass("hide");
    })

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

左侧菜单

示例；tab切换

tab切换

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

属性操作

//------------------------------------属性
$("").attr();
$("").removeAttr()
$("").prop();
$("").removeProp();

//-----------------------------------css类
$("").addClass(class|fn)
$("").removeClass([class|fn])

//------------------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

//-----------------------------------------
$("").css("color","red")

注意 attr 和 prop:

<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>

示例：全、反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>

             function selectall(){

                 $("table :checkbox").prop("checked",true)
             }
             function cancel(){

                 $("table :checkbox").prop("checked",false)
             }

             function reverse(){


                 //                 var idlist=$("table :checkbox")
//                 for(var i=0;i<idlist.length;i++){
//                     var element=idlist[i];
//
//                     var ischecked=$(element).prop("checked")
//                     if (ischecked){
//                         $(element).prop("checked",false)
//                     }
//                     else {
//                         $(element).prop("checked",true)
//                     }
//
//                 }
//    jquery循环的两种方式
                 //方式一
//                 li=[10,20,30,40]
//                 dic={name:"yuan",sex:"male"}
//                 $.each(li,function(i,x){
//                     console.log(i,x)
//                 })

                 //方式二
//                    $("tr").each(function(){
//                        console.log($(this).html())
//                    })



                 $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

//                     if ($(this).prop("checked")){
//                         $(this).prop("checked",false)
//                     }
//                     else {
//                         $(this).prop("checked",true)
//                     }

                     // 思考:如果用attr方法可以实现吗?


                 });
             }

    </script>
</head>
<body>

     <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>

     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>



</body>
</html>

全、反选

示例：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
             200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


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

    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

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

模态对话框

样式操作

样式类

addClass();  // 添加指定的css类名
removeClass();  // 移除指定的css类名
hasClass();  // 判断样式存不存在
toggleClass();  // 切换css类名，如果有就移除，如果没有就添加

CSS

css("color","red")  // DOM 操作:tag.style.color="red"

示例：

$("p").css("color","red")  // 将所有p标签的字体设置为红色

位置：

offset()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  // 获取匹配元素相对父元素的偏移
scrollTop()  // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移

.offset() 方法允许我们检索一个元素相对于文档 ( document ) 的当前位置。

.offset() 和 .position() 的差别在于：.position() 是相对于父级元素的位移。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        .c1 {
            100px;
            height:100px;
            background-color: #2459a2;
        }
        .c2 {
            height:50px;
            50px;
            position:fixed;
            bottom:15px;
            right:15px;
            background-color: rebeccapurple;
        }
        .hide {
            display:none;
        }
        .c3 {
            height:100px;
        }
    </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").on("click",function () {
        $(".c1").offset({left:200,top:200});
    });
    $(window).scroll(function () {
        if($(window).scrollTop()>100){
            $("#b2").removeClass("hide");
        }else{
            $("#b2").addClass("hide");
        }
    });
    $("#b2").on("click",function () {
        $(window).scrollTop(0);
    })
</script>



</body>
</html>

返回顶部

尺寸：

height()  // 这里的高度是指 css 盒子模型中的 center 的高度
innerhight()  // 这里的高度指的是 css 盒子模型中的 center + padding 的高度
outerheught()  // 这里的高度是指 css 盒子模型中的 center + padding + border 的高度

width()  // 这里的宽度指的是 css 盒子模型中的 center 的宽度
innerwidth()  // 这里的宽度指的是 css 盒子模型中的 center + padding 的宽度
outerwidth()  // 这里的宽度指的是 css 盒子模型中的 center + padding + border 的宽度

文本操作

HTML 代码：

html()  // 获取第一个匹配元素的 html 的内容
html(val)  // 设置所有匹配元素的 html 内容

文本值：

text()  // 获取所有匹配元素的内容
text(val)  // 设置所有匹配元素的内容

值：

val()  // 取第一个匹配元素的当前值
val(val)  // 设置所有匹配元素的值
val([val1,val2])  // 设置 checkbox、select 的值

示例：

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

<label for="s1">城市</label>
<select  id="s1">
    <option value="baijing">北京</option>
    <option value="shanghai">上海</option>
    <option selected value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
</select>
<hr>
<label for="s2">爱好</label>
<select id="s2" multiple="multiple">
    <option value="basketball">篮球</option>
    <option value="football">足球</option>
    <option value="boll">球</option>
    <option selected value="doubleball">双色球</option>
</select>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 单选下拉框
    $("#s1").val("shanghai");  // 在页面上显示的是选中的“上海”
    // 多选下拉框
    $("#s2").val(["basketball","football"]); // 在页面上显示的是选中了“篮球”和“足球”
</script>
</body>
</html>

jQuery val 赋值示例

自定义登录验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录验证</title>
    <style>
        .error {
            color:red;
        }
    </style>
</head>
<body>

<form action="">
    <div>
        <label for="input-name">用户名</label>
        <input type="text" id="input-name" name="name">
        <span class="error"></span>
    </div>
    <div>
        <label for="input-password">密码</label>
        <input type="password" id="input-password" name="password">
        <span class="error"></span>
    </div>
    <div>
        <input type="button" id="btn" value="提交">
    </div>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
    var $inputNameObj=$("#input-name");
    //失去焦点之后判断用户名输入框中是否为空，如果为空，则显示提示信息
    $inputNameObj.on("blur",function () {
        // 取到name那个input框的值
        var username=$inputNameObj.val();
        // 判断输入的name 长度是不是空
        if(username.length===0){
            // 如果长度为空，则显示错误提示信息
            $inputNameObj.siblings(".error").text("用户名不能为空");
        }
    });
    // 在获取焦点之后清空原本在用户名输入框中的内容
    $inputNameObj.on("focus",function () {
        $(this).next("span").text("");
    });
    var $inputPasswordObj= $("#input-password");
    // 在失去之后判断密码输入框中的内容是否为空，如果为空，则显示错误提示信息
    $inputPasswordObj.on("blur",function () {
         var password=$inputPasswordObj.val();
         if(password.length===0){
             $inputPasswordObj.siblings(".error").text("密码不能为空");
         }
    });
    // 获取焦点之后将密码框中的内容清空（即是将其内容设为空字符串）
    $inputPasswordObj.on("focus",function () {
        $(this).next("span").text("")
    })
</script>
</body>
</html>

自定义登录验证

文档处理：
添加式到指定元素内部的后面

$(A).append(B)  // 把 B 追加到 A 的内部的最后，成为 A 的最后一个子元素
$(A).appendTo(B)  // 把 A 追加到 B 内部的最后，成为 A 的最后一个子元素

添加到指定元素内部的前面

$(A).prepend(B)  // 把 B 添加到 A 的内部的前面，成为 B 的第一个子元素
$(A).prependTo(B)  // 把 A 添加到 B 的内部的前面，成为 B 的第一个子元素

添加到指定元素外部的后面

$(A).after(B)  // 把 B 放到 A 的后面，让 B 成为紧挨着 A 的兄弟元素
$(A).insertAfter(B)  // 把 A 放到 B 的后面，让 A 成为紧挨着 B 的兄弟元素

添加到指定元素外部的前面

$(A).before(B)  // 把 B 放到 A 的前面，让 B 成为紧挨着 A 的兄弟元素
$(A).insertBefore(B)  // 把 A 放到 B 的前面，让 A 成为紧挨着 B 的兄弟元素

移除和清空元素

$("").remove()  // 从DOM中删除所有匹配的元素，当要删除的元素是某个标签的子标签的时候，会连着父标签一起删除
$("").empty()  // 删除匹配的元素集合中所有的子节点

替换

$("").replaceWith()
$("").replaceAll()  // 替换所有

克隆

clone()  // 参数

点击复制按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
    <style>
        .c1 {
            background-color: #336699;
            margin:5px;
            padding:5px;
            200px;
            height:40px;
            line-height:40px;
        }
        .c2 {
            background-color: #8eb031;
            margin:5px;
            padding:5px;
            200px;
            height:40px;
            line-height:40px;
        }
    </style>
</head>
<body>
<div class="c1">一刀暴击，刀刀有礼！</div>

<div class="c2">你点我一下试试.....</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // clone方法参加turn，克隆标签并且克隆标签带的事件
    $(".c1").on("click",function () {
        $(this).clone(true).insertAfter(this);
    });
    
    // clone方法不参加turn，克隆标签但不克隆标签带的事件
    $(".c2").on("click",function () {
        $(this).clone().insertAfter(this);
    });
</script>
</body>
</html>

克隆示例-----点击复制按钮

事件

页面载入:

ready()  // 当DOM载入就绪可以进行查询及操纵的时候绑定一个要执行的函数
$(document).ready(function() {})  <=======>$(function() {})

事件处理:

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数
//  .on 的 selector 函数是筛选出调用 .on 方法的 DOM 元素的指定子元素，如：
//  $("ul").on("click","li",function() {console.log("click");}) 就是筛选出 ul 下的 li 给其绑定的 click 事件

[selector] 参数的好处：
    好处在于 .on 方法为动态添加的元素也能绑定上指定的事件，如：

    // $("ul,li").on("click",function() {console.log("click");}) 的绑定方式和
    // $("ul,li").bind("click",function() {concole.log("click");}) 一样；我通过 js 给 ul 添加了一个
    // li:$("ul").append("<li>js new li </li>");这个新加的 li 是不会被绑上 click 事件的

    // 但是用 $("ul").on("click","li",function() {console.log("click");}) 方法绑定，然后动态添加
    // li:$("ul").append("<li>js new li </li>"); 这个新生成的 li 被绑上了 click 事件

[data] 参数的调用：
    function myHandler(event) {
        alert(event.data.foo);
}
    $("li").on("click",{foo:"bar"}, myHandler)

实例之面板拖动

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

<div style="border:1px solid #ddd;600px;position:absolute;">
    <div id="title" style="background-color:black;height:40px;color:white;">
        标题
    </div>
    <div style="height:300px;">
        内容
    </div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        // 页面加载完成之后自动执行
        $("#title").mouseover(function () {
            $(this).css("cursor","move");
        }).mousedown(function (e) {
            // console.log($(this).offset());
            var _event=e||window.event;
            // 原始鼠标纵坐标位置
            var ord_x=_event.clientX;
            var ord_y=event.clientY;

            var parent_left=$(this).parent().offset().left;
            var parent_top=$(this).parent().offset().top;

            $(this).bind("mousemove",function (e) {
                var _new_event=e||window.event;
                var new_x=_new_event.clientX;
                var new_y=_new_event.clientY;

                var x=parent_left + (new_x-ord_x);
                var y=parent_top + (new_y-ord_y);

                $(this).parent().css("left",x+"px");
                $(this).parent().css("top",y+"px");
            })
        }).mouseup(function () {
            $(this).unbind("mousemove");
        })
    })
</script>


</body>
</html>

面板拖动

实例之放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bigger</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .outer{
            height: 100%;
             100%;
            border: dashed 5px cornflowerblue;
        }
        .outer .small_box{
            position: relative;
        }
        .outer .small_box .float{
            height: 175px;
             175px;
            background-color: darkgray;
            opacity: 0.4;
            fill-opacity: 0.4;
            position: absolute;
            display: none;

        }

        .outer .big_box{
            height: 400px;
             400px;
            overflow: hidden;
            position:absolute;
            left: 360px;
            top: 0;
            z-index: 1;
            border: 5px solid rebeccapurple;
            display: none;


        }
        .outer .big_box img{
            position: absolute;
            z-index: 5;
        }


    </style>
</head>
<body>

        <div class="outer">
            <div class="small_box">
                <div class="float"></div>
                <img src="small.jpg">

            </div>
            <div class="big_box">
                <img src="big.jpg">
            </div>

        </div>


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

    $(function(){

          $(".small_box").mouseover(function(){

              $(".float").css("display","block");
              $(".big_box").css("display","block")

          });
          $(".small_box").mouseout(function(){

              $(".float").css("display","none");
              $(".big_box").css("display","none")

          });

          $(".small_box").mousemove(function(e){

              var _event=e || window.event;

              var float_width=$(".float").width();
              var float_height=$(".float").height();

              console.log(float_height,float_width);

              var float_height_half=float_height/2;
              var float_width_half=float_width/2;
              console.log(float_height_half,float_width_half);


               var small_box_width=$(".small_box").height();
               var small_box_height=$(".small_box").width();



//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
              var mouse_left=_event.clientX-float_width_half;
              var mouse_top=_event.clientY-float_height_half;

              if(mouse_left<0){
                  mouse_left=0
              }else if (mouse_left>small_box_width-float_width){
                  mouse_left=small_box_width-float_width
              }


              if(mouse_top<0){
                  mouse_top=0
              }else if (mouse_top>small_box_height-float_height){
                  mouse_top=small_box_height-float_height
              }

               $(".float").css("left",mouse_left+"px");
               $(".float").css("top",mouse_top+"px")

               var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
               var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

              console.log(percentX,percentY)

               $(".big_box img").css("left", -percentX*mouse_left+"px")
               $(".big_box img").css("top", -percentY*mouse_top+"px")
          })
    })


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

放大镜

常用事件

click(function() {......})
hover(function() {......})
blur(function() {.......})
focus(function() {......})
change(function() {......})
keyup(function() {.......})

查看全文

相关阅读:
如何在一个for语句中迭代多个对象(2.7)
yield列表反转 islice切片（2.6）
yield和生成器，通过斐波那契数列学习（2.5）
python实现线程池(2.4)
LOJ 3120: 洛谷 P5401: 「CTS2019 | CTSC2019」珍珠
 瞎写的理性愉悦：正整数幂和与伯努利数
 bzoj 3328: PYXFIB
LOJ 3119: 洛谷 P5400: 「CTS2019 | CTSC2019」随机立方体
 洛谷 P5345: 【XR-1】快乐肥宅
 LOJ 3089: 洛谷 P5319: 「BJOI2019」奥术神杖

原文地址：https://www.cnblogs.com/hzhcdhm/p/8179096.html