• 前端学习之-- Jquery

    Jquery学习笔记

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

    Jquery是一个包含DOM/BOM/JavaScript的类库
    引入jquery文件方法：<script src='jquery-1.12.4.js'></script>
    调用jquery方法有以下2种
    <script>
    　　jQuery 或者 $
    </script>

    Jquery版本系列包含：
    1.X -> 推荐 兼容性更好IE8以下
    2.X
    3.X

    Jquery和dom之间的转换方法：
    jquery和dom输出的区别：jquery的输出是使用中括号[]包裹的，dom输出是直接输出的html标签样式。
    jquery对象转换为dom方法：在jquery语句后面加上第0个元素[0]，这时输出就转换为DOM对象。
    如：首先需要导入jquery文件
    　　执行：$('#l1')
    　　jquery输出：[div#l1, context: document, selector: "#l1"]
    　　执行：$('#l1')[0]
    　　输出：<div id="l1">123</div>
    DOM对象转换为jquery写法：在dom对象外使用$()包裹后，即刻转为jquery对象，如：$(DOM对象)
    如：d =document.getElementById('l1')
    　　$(d) 转换为jquery
    　　输出：[div#l1, context: div#l1]


    一：查找元素
    DOM : 10个左右(get系列）
    jquery分2种：
    第一种选择器：直接找到某个或者某类标签
    1：id选择器，根据标签内的ID进行查询。如：$('#l1')
    2：class选择器，根据标签内的class进行查询。如：$('.l1')
    3：标签选择器，根据标签名进行查询。如：$('div')
    4：组合选择器，可以根据标签，ID，class名统一查询，如：$('div,#l1,.l1')
    5：层级选择器
    $('#i10 a') 先定位到i10标签，然后从其内部包含的所有标签中查找所有的a标签
    $('#i10>a') 只在i10下的子标签中查找a标签
    6：基本筛选器
    :first 从查询结果中提取第一个元素
    :last 从查询结果中提取最后一个元素
    :even 筛选所有的基数行
    :odd 筛选所有的偶数行
    :eq(index) 根据索引查找
    :header 找到所有的h标签
    7：属性
    $('[name]') 具有name属性的所有标签
    $('[name="123"]') name属性等于123的标签
    $("input[type='text']") # 这里第一步筛选input,然后找到type=text的所有标签
    $(':text') 简写
    jquery方法内置循环:
    $('#tb:checkbox').each(function(k){
    　　// k 当前索引
    　　//this 是dom对象，代指当前循环的元素 $(this)
    }
    三元运算写法：var v = 条件 ？ 真值 ： 假值

    实例见：jquery多选反选全选.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="全选" onclick="checkAll();" />
 9     <input type="button" value="反选" onclick="reverseAll();" />
10     <input type="button" value="取消" onclick="channelAll();" />
11     <table border="1" >
12         <thead>
13             <th>选择</th>
14             <th>IP</th>
15         </thead>
16         <tbody id="tb">
17             <tr>
18                 <td><input type="checkbox"></td>
19                 <td>1.1.1.1</td>
20             </tr>
21             <tr>
22                 <td><input type="checkbox"></td>
23                 <td>2.2.2.2</td>
24             </tr>
25             <tr>
26                 <td><input type="checkbox"></td>
27                 <td>3.3.3.3</td>
28             </tr>
29         </tbody>
30     </table>
31     <script src="jquery-1.12.4.js"></script>
32     <script>
33         /* 获取id=tb下所有的checkbox属性标签，使用prop方法，如果后面带1个参数表示获取值，带2个参数表示赋值*/
34         function checkAll() {
35             $('#tb :checkbox').prop('checked',true)
36         }
37         function  channelAll() {
38             $('#tb :checkbox').prop('checked',false)
39         }
40         function reverseAll() {
41             /* each方法是循环获取的所有checkbox属性标签,然后通过函数对每个标签进行操作，k表示所有标签的索引*/
42             $(':checkbox').each(function (k) {
43                 /* DOM写法，this表示当前的标签
44                 if(this.checked){
45                     this.checked = false;
46                 }else{
47                     this.checked = true;
48                 }
49                 */
50                 /* jquery写法，这里用$(this)将doc标签转换为jquery格式
51                 if ($(this).prop('checked')) {
52                     $(this).prop('checked', false)
53                 } else {
54                     $(this).prop('checked', true)
55                 }*/
56                 // 写法3，三元运算，v = 条件? 值1:值2，当条件为真将值1赋予v，反之值2赋予v
57                 var v = $(this).prop('checked')?false:true;
58                 $(this).prop('checked',v)
59             })
60         }
61     </script>
62 </body>
63 </html>
    View Code

    第二种筛选器：在选择器选择后出现的多个符合条件的标签中，再次进行选择。
    $(this).next() 当前标签的下一个兄弟标签
    $(this).nextAll() 当前标签下面的所有兄弟标签（不包含兄弟标签中的子标签）
    $(this).nextUntil('#ii1') 从当前标签开始向下查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
    $(this').prev() 当前标签的上一个兄弟标签
    $(this).prevAll() 当前标签上面的所有兄弟标签（不包含兄弟标签中的子标签）
    $(this).prevUntil('#ii1') 从当前标签开始向上查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
    $(this).parent() 当前标签的父标签
    $(this).parents() 当前标签的所有父标签，直到<html>标签
    $(this).parentsUntil('#ii1') 从当前标签开始向上查找直到一个父标签ID=ii1的标签结束，提取这个区间范围的所有标签
    $(this).children() 当前标签的所有子标签
    $(this).siblings() 当前标签的所有兄弟标签
    $(this).find(样式名) 查找当前标签下的样式名
    $(this).eq(1) 查找到的标签列表根据索引提取指定的标签
    hasClass(class) 判断是否具有class这个样式
    实例：菜单动态.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style>
 6         .header{
 7             background-color:black;
 8             color:wheat;
 9         }
10         .content{
11             min-height:50px;
12         }
13         .hide{
14             display: none;;
15         }
16     </style>
17     <title>Title</title>
18 </head>
19 <body>
20     <div id='ii1' style="height:400px;200px;border:1px solid red;">
21         <div class="item">
22             <div id='i11' class="content hide">内容一
23                 <div class="ct2">test</div>
24             </div>
25             <div id='i22' class="content hide">内容2</div>
26             <div id='i33' class="content hide">内容3</div>
27             <div class="header">标题一</div>
28             <div id='i1' class="content hide">内容一
29                 <div class="content2">test</div>
30             </div>
31             <div id='i2' class="content hide">内容2</div>
32             <div id='i3' class="content hide">内容3</div>
33         </div>
34         <div class="item">
35             <div class="header">标题二</div>
36             <div class="content hide">内容二</div>
37         </div>
38         <div class="item">
39             <div class="header">标题三</div>
40             <div class="content hide">内容三</div></div>
41         <div class="item">
42             <div class="header">标题四</div>
43             <div class="content hide">内容四</div>
44         </div>
45     </div>
46     <script src="jquery-1.12.4.js"></script>
47     <script>
48         $('.header').click(function () {
49             //当前点击的标签 $(this)
50             // 获取某个标签的下一个标签
51             // 获取某个标签的父标签
52             // 获取所有的兄弟标签
53             //添加样式和移除样式
54             //  $('#i1').addClass('hide')
55             //  $('#i1').removeClass('hide')
56             // 利用筛选器
57             /*
58             $(this).next()  //获取当前标签的下一个标签
59             $(this).prev()  //获取当前标签的上一个标签
60             $(this).parent()  //获取当前标签的父标签
61             $(this).children()  //获取当前标签的子标签
62             $(this).siblings()  //获取当前标签的所有兄弟标签
63             $(this).find('#i1') //查找并获取当前标签内ID为i1的标签（子子孙孙中查找）
64             */
65             console.log($(this).parentsUntil('#ii1'))
66             $(this).prevAll().removeClass('hide')
67             $(this).parent().siblings().find('.content').addClass('hide')
68             // 支持链式编程
69             // $(...).click() 这里的click是绑定事件
70             // $(this).next().remove('hide').parent().siblings().find('.content').addClass('hide')
71         })
72     </script>
73 </body>
74 </html>
    View Code

    文本操作：
    $(..).text() # 只获取文本内容，不获取内部的html标签
    $(..).text("<a>1</a>") # 设置文本内容,内容中的html标签不会进行解析，统一以字符串新式出现。
    $(..).html() #获取文本内容，文本内容中的html标签也会以字符串形式获取到。
    $(..).html("<a>1</a>") #设置文本内容，字符串中的html标签在设置时将会进行解析，将解析后的1进行赋值。
    以下val适用于input之类的具有输入功能的框
    $(..).val() 获取值，用于具有value属性的标签
    $(..).val(..) 设置值，用于具有value属性的标签
    实例：模态编辑框

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .modal{
11             position: fixed;
12             top:50%;
13             left:50%;
14             width:500px;
15             height:400px;
16             margin-left:-250px;
17             margin-top:-250px;
18             background-color: #dddddd;
19             z-index: 10;
20         }
21         .shadow{
22             position:fixed;
23             top:0;
24             left:0;
25             right:0;
26             bottom:0;
27             opacity:0.6;
28             background-color: black;
29             z-index:9;
30         }
31     </style>
32 </head>
33 <body>
34 <a onclick="Addtx();">添加</a>
35 <table border="1">
36     <thead>
37         <tr>
38             <th>ip</th>
39             <th>port</th>
40             <th>os</th>
41         </tr>
42     </thead>
43     <tbody>
44         <tr>
45             <td>1.1.1.1</td>
46             <td>80<b>test</b></td>
47             <td>
48                 <a>添加</a> | <a class="edit">编辑</a> | <a>删除</a>
49             </td>
50         </tr>
51         <tr>
52             <td>1.1.1.1</td>
53             <td>80</td>
54             <td>
55                 <a>添加</a> | <a class="edit">编辑</a> | <a>删除</a>
56             </td>
57         </tr>
58     </tbody>
59 </table>
60 <div class="modal hide">
61     <div>
62         <input name="hostname" type="text"/>
63         <input name="port" type="text"/>
64     </div>
65     <div>
66         <input type="button" value="取消" onclick="cancel();" />
67     </div>
68 </div>
69 <div class="shadow hide"></div>
70 <script src="jquery-1.12.4.js"></script>
71 <script>
72     /*为样式名modal,shadow的标签删除hide样式*/
73     function Addtx() {
74         $('.modal,.shadow').removeClass('hide')
75     }
76     /*为样式名 添加hide样式*/
77     function cancel() {
78         $('.modal,.shadow').addClass('hide')
79         /*对输入框进行清空操作*/
80         $('.modal input[type="text"]').val('')
81     }
82     /*样式edit 点击触发click事件，执行一个匿名函数*/
83     $('.edit').click(function () {
84         /*获取当前标签this的父标签的以上所有同级别标签*/
85         var tds = $(this).parent().prevAll();
86         Addtx(); /*执行函数*/
87         var ip = $(tds[1]).text() /*将tds[1]的dom转换为jquery，使用text方法提取文本内容*/
88         var port = $(tds[0]).text()
89         $('.modal input[name="hostname"]').val(ip) /*查找样式modal标签下的input[name=hostname]的标签进行赋值操作*/
90         $('.modal input[name="port"]').val(port)
91     })
92 </script>
93 </body>
94 </html>
    View Code

    样式操作：
    addClass #添加样式
    removeClass # 删除样式
    toggleClass # 如果样式存在则删除样式，如果样式不存在则添加样式（开关效果）
    实例：开关

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <input id='btn' type="button" value="开关" />
14 <span class="i1 hide">开灯了</span>
15 </body>
16 <script src="jquery-1.12.4.js"></script>
17 <script>
18     $('#btn').click(
19             function () {
20                 $('.i1').toggleClass('hide')
21             }
22     )
23 </script>
24 </html>
    View Code

    属性操作：
    # 一般专门用于做自定义属性操作
    $(..).attr('n')：当为一个参数时候是获取属性值
    $(..).attr('n','v')：当为2个参数时是修改属性值，如果出现重复则覆盖
    $(..).removeAttr('n')：删除属性

    实例：模态编辑框通过自定义属性动态加载内容

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .modal{
 11             position: fixed;
 12             top:50%;
 13             left:50%;
 14             width:500px;
 15             height:400px;
 16             margin-left:-250px;
 17             margin-top:-250px;
 18             background-color: #dddddd;
 19             z-index: 10;
 20         }
 21         .shadow{
 22             position:fixed;
 23             top:0;
 24             left:0;
 25             right:0;
 26             bottom:0;
 27             opacity:0.6;
 28             background-color: black;
 29             z-index:9;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34 <a onclick="Addtx();">添加</a>
 35 <table border="1">
 36     <thead>
 37         <tr>
 38             <th>ip</th>
 39             <th>port</th>
 40             <th>os</th>
 41         </tr>
 42     </thead>
 43     <tbody>
 44         <tr>
 45             <td target="hostname">1.1.1.1</td>
 46             <td target="port">80</td>
 47             <td>
 48                 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
 49             </td>
 50         </tr>
 51         <tr>
 52             <td target="hostname">1.1.1.1</td>
 53             <td target="port">80</td>
 54             <td>
 55                 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
 56             </td>
 57         </tr>
 58     </tbody>
 59 </table>
 60 <div class="modal hide">
 61     <div>
 62         <input name="hostname" type="text"/>
 63         <input name="port" type="text"/>
 64     </div>
 65     <div>
 66         <input type="button" value="取消" onclick="cancel();" />
 67     </div>
 68 </div>
 69 <div class="shadow hide"></div>
 70 <script src="jquery-1.12.4.js"></script>
 71 <script>
 72     /*为样式名modal,shadow的标签删除hide样式*/
 73     function Addtx() {
 74         $('.modal,.shadow').removeClass('hide')
 75     }
 76     /*为样式名 添加hide样式*/
 77     function cancel() {
 78         $('.modal,.shadow').addClass('hide')
 79         /*对输入框进行清空操作*/
 80         $('.modal input[type="text"]').val('')
 81     }
 82     /*样式edit 点击触发click事件，执行一个匿名函数*/
 83     $('.edit').click(function () {
 84         Addtx(); /*执行函数*/
 85         var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/
 86         tds.each(
 87                 function () {
 88                     /*this代表当天的td，获取td的target的值*/
 89                     var n = $(this).attr('target');
 90                     /*获取td中的内容*/
 91                     var txt = $(this).text();
 92                     /*进行字符串拼接，以满足定位目标输入框的属性和对应值*/
 93                     var a1 = '.modal input[name=';
 94                     var a2 = ']';
 95                     var temp = a1 + n + a2;
 96                     /*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/
 97                     $(temp).val(txt)
 98                 }
 99         )
100     })
101     $('.del').click(function () {
102         $(this).parent().parent().remove()
103     })
104     $('.cp').click(function () {
105         /*克隆标签*/
106         var new_ct = $(this).parent().parent().clone()
107         var par_ct = $(this).parent().parent().parent()
108         par_ct.append(new_ct)
109     })
110 </script>
111 </body>
112 </html>
    View Code

    # prop方法专门用于checkbox,radio等类似的选择功能标签
    $(..).prop('checked')
    $(..).prop('checked',true)
    PS:
    .index 获取索引位置
    见实例：菜单切换_索引方法.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .active{
11             background-color:brown;
12         }
13         .menu{
14             height:38px;
15             background-color: #eeeeee;
16             line-height:38px;
17             cursor:pointer;/*鼠标链接以小手形状出现*/
18         }
19         .menu-item{
20             float:left;
21             border-right:1px solid red;
22             padding:0 5px;
23         }
24         .content{
25             min-height:100px;
26             border:1px solid red;
27         }
28     </style>
29 </head>
30 <body>
31 <div style="700px;margin:0 auto;">
32     <div class="menu">
33         <div class="menu-item active">menu 1</div>
34         <div class="menu-item">menu 2</div>
35         <div class="menu-item">menu 3</div>
36     </div>
37     <div class="content">
38         <div>content 1</div>
39         <div class="hide">content 2</div>
40         <div class="hide">content 3</div>
41     </div>
42 </div>
43 <script src="jquery-1.12.4.js"></script>
44 <script>
45     /*根据自定义属性进行操作*/
46     $('.menu-item').click(function () {
47         /*当前标签添加active样式并将所有兄弟标签删除active样式*/
48         $(this).addClass('active').siblings().removeClass('active');
49         /*获取当前标签的索引号*/
50         var v = $(this).index();
51         /*根据content下通过eq定位索引标签进行操作*/
52         $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide')
53     })
54 </script>
55 </body>
56 </html>
    View Code

    文档处理：（实现添加，删除，修改）
    append #在目标标签内的子标签最下方添加内容
    prepend #在目标标签内的子标签最上方添加内容
    after #在目标标签同级下方添加内容
    before #在目标标签同级上方添加内容
    remove #删除 根据索引对应到的标签和内容
    empty #只清空标签内容，不删除标签
    clone #克隆一份，然后需要通过append再次添加克隆的数据
    实例：标签添加删除复制.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" id="txt">
 9 <input type="button" id="Add" value="添加" />
10 <input type="button" id="Del" value="删除" />
11 <input type="button" id="Cp" value="复制" />
12 
13 <ul>
14     <li>abc</li>
15     <li>123</li>
16     <li>def</li>
17 </ul>
18 <script src="jquery-1.12.4.js"></script>
19 <script>
20     $('#Add').click(function () {
21         var txt = $('#txt').val()
22         var tit = '<li>' + txt +'</li>'
23         /* 在li的最下方添加标签和内容*/
24         $('ul').append(tit)
25         /*在li的最上方添加标签和内容
26         $('ul').prepend(tit)
27         */
28         /*在同级标签的下方添加标签和内容
29         $('ul').after(tit)
30         */
31         /*在同级标签的最上方添加标签和内容
32         $('ul').before(tit)
33         */
34     });
35     $('#Del').click(function () {
36         var index = $('#txt').val();
37         /*删除标签和内容*/
38         $('ul li').eq(index).remove();
39         /*只删除内容
40         $('ul li').eq(index).empty()*/
41     });
42     $('#Cp').click(function () {
43         var index = $('#txt').val();
44         /*根据索引号克隆一行新的数据*/
45         var new_ct = $('ul li').eq(index).clone();
46         /*添加克隆出来的数据*/
47         $('ul').append(new_ct)
48     })
49 </script>
50 </body>
51 </html>
    View Code

    实例：模态编辑框添加编辑删除克隆.html

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .modal{
 11             position: fixed;
 12             top:50%;
 13             left:50%;
 14             width:500px;
 15             height:400px;
 16             margin-left:-250px;
 17             margin-top:-250px;
 18             background-color: #dddddd;
 19             z-index: 10;
 20         }
 21         .shadow{
 22             position:fixed;
 23             top:0;
 24             left:0;
 25             right:0;
 26             bottom:0;
 27             opacity:0.6;
 28             background-color: black;
 29             z-index:9;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34 <a onclick="Addtx();">添加</a>
 35 <table border="1">
 36     <thead>
 37         <tr>
 38             <th>ip</th>
 39             <th>port</th>
 40             <th>os</th>
 41         </tr>
 42     </thead>
 43     <tbody id="tb">
 44         <tr>
 45             <td target="hostname">1.1.1.1</td>
 46             <td target="port">80</td>
 47             <td>
 48                 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
 49             </td>
 50         </tr>
 51         <tr>
 52             <td target="hostname">1.1.1.1</td>
 53             <td target="port">80</td>
 54             <td>
 55                 <a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
 56             </td>
 57         </tr>
 58     </tbody>
 59 </table>
 60 <div class="modal hide">
 61     <div>
 62         <input name="hostname" type="text"/>
 63         <input name="port" type="text"/>
 64     </div>
 65     <div>
 66         <input type="button" value="确定" onclick="confirmModal();" />
 67         <input type="button" value="取消" onclick="cancel();" />
 68     </div>
 69 </div>
 70 <div class="shadow hide"></div>
 71 <script src="jquery-1.12.4.js"></script>
 72 <script>
 73     /*为样式名modal,shadow的标签删除hide样式*/
 74     function Addtx() {
 75         $('.modal,.shadow').removeClass('hide')
 76     }
 77     /*为样式名 添加hide样式*/
 78     function cancel() {
 79         $('.modal,.shadow').addClass('hide')
 80         /*对输入框进行清空操作*/
 81         $('.modal input[type="text"]').val('')
 82     }
 83     /*添加行数据*/
 84     function confirmModal() {
 85         var htname = $('.modal input[name="hostname"]').val();
 86         var htport = $('.modal input[name="port"]').val();
 87         var tr = document.createElement('tr');
 88         var td1 = document.createElement('td');
 89         td1.setAttribute('target','hostname');
 90         td1.innerHTML = htname;
 91         var td2 = document.createElement('td');
 92         td2.setAttribute('target','port');
 93         td2.innerHTML = htport;
 94         var td3 = document.createElement('td');
 95         td3.innerHTML = '<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>'
 96         $(tr).append(td1);
 97         $(tr).append(td2);
 98         $(tr).append(td3);
 99         $('#tb').append(tr);
100         cancel()
101     }
102 
103     /*样式edit 点击触发click事件，执行一个匿名函数*/
104     $('.edit').click(function () {
105         Addtx(); /*执行函数*/
106         var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/
107         tds.each(
108                 function () {
109                     /*this代表当天的td，获取td的target的值*/
110                     var n = $(this).attr('target');
111                     /*获取td中的内容*/
112                     var txt = $(this).text();
113                     /*进行字符串拼接，以满足定位目标输入框的属性和对应值*/
114                     var a1 = '.modal input[name=';
115                     var a2 = ']';
116                     var temp = a1 + n + a2;
117                     /*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/
118                     $(temp).val(txt)
119                 }
120         )
121     })
122     $('.del').click(function () {
123         $(this).parent().parent().remove()
124     })
125     $('.cp').click(function () {
126         /*克隆标签*/
127         var new_ct = $(this).parent().parent().clone()
128         var par_ct = $(this).parent().parent().parent()
129         par_ct.append(new_ct)
130     })
131 </script>
132 </body>
133 </html>
    View Code

    CSS样式处理
    获取标签，然后通过css进行设置样式
    $('t1').css('样式名称','样式值')
    抽屉点赞功能：
    实例：点攒.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .contain{
 8             padding:50px;
 9             border:1px solid #ddd;
10         }
11         .item{
12             position: relative;
13             width:30px;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="contain">
19     <div class="item">
20         <span>攒</span>
21     </div>
22 </div>
23 <div class="contain">
24     <div class="item">
25         <span>攒</span>
26     </div>
27 </div>
28 <script src="jquery-1.12.4.js"></script>
29 <script>
30     $('.item').click(function () {
31         /*点击item触发事件执行这个函数*/
32         Addfaver(this)
33     })
34     function Addfaver(self) {
35         /*实现效果，初始化效果值*/
36         var fontsize=15;
37         var top=0;
38         var right=0;
39         var opacity=1;
40         /*创建一个span标签*/
41         var tag = document.createElement('span')
42         $(tag).text('+1')
43         /*设置标签样式*/
44         $(tag).css('color','green')
45         $(tag).css('position','absolute');
46         $(tag).css('fontsize',fontsize + "px")
47         $(tag).css('top',top + "px")
48         $(tag).css('right',right + "px")
49         $(tag).css('opacity',opacity)
50         $(self).append(tag)
51         /*以下使用定时器实现效果的变化*/
52         var obj = setInterval(function () {
53             fontsize = fontsize + 5;
54             top = top - 5;
55             right= right - 5;
56             opacity= opacity - 0.2;
57             $(tag).css('fontsize',fontsize + "px")
58             $(tag).css('top',top + "px")
59             $(tag).css('right',right + "px")
60             $(tag).css('opacity',opacity)
61             /*当透明度小于0时候，进行删除定时器和删除+1的标签*/
62             if(opacity < 0){
63                 clearInterval(obj)
64                 $(tag).remove()
65             }
66         },100)
67     }
68 </script>
69 </body>
70 </html>
    View Code

    滑轮位置：
    $(div).scrollTop() 获取div的上下滑轮位置
    $(window).scrollTop() 获取windows窗口的上下滑轮位置
    $(window).scrollTop(0) 设置滑轮位置值
    .scrollLeft([val]) 左右位置
    offset 指定标签在html中的坐标
    offset().left 指定标签在html中的坐标
    offset().top 指定标签在html中的坐标

    事件绑定方式：
    DOM:三种绑定方式
    jquery:
    第一种:$('.c1').click() # 很多种绑定事件
    第二种:$('.c1').bind('click',function(){ }) # 对.c1绑定click事件
    $('.c1').unbind('click',function(){ }) # 对.c1解除绑定click事件
    $('.c1').delegate('a','click',function(){ }) # 对.c1下面的所有a标签绑定一个click事件，这个功能可以实现动态添加的标签具有事件绑定，很有用。
    $('.c1').undelegate('a','click',function(){ }) # 对.c1下面所有a标签解除click事件
    $('.c1').on('click',function(){}) # 以上所有绑定方式在jquery内部全部使用的是on绑定
    $('.c1').off('click',function(){})
    实例：绑定实例.html -->注意delegate的使用

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input id="t1" type="text" />
 9 <input type="button" id="a1" value="添加" />
10 <ul id="u1">
11     <li>123</li>
12     <li>123</li>
13     <li>123</li>
14 </ul>
15 <script src="jquery-1.12.4.js"></script>
16 <script>
17     $('#a1').click(function () {
18         var v = $('#t1').val();
19         var tmp = '<li>' + v + "</li>"
20         $('#u1').prepend(tmp)
21     })
22     /*使用以下方法添加标签后，但是无法触发alert事件
23     $('ul li').click(function () {
24         var v = $(this).text()
25         alert(v)
26     })
27     $('ul li').bind('click',function () {
28         var v = $(this).text()
29         alert(v)
30     })
31     $('ul li').on('click',function () {
32         var v = $(this).text()
33         alert(v)
34     })
35     */
36     /*这个叫委托，可以对添加的标签进行绑定事件执行*/
37     $('ul').delegate('li','click',function () {
38         var v = $(this).text()
39         alert(v)
40     })
41 </script>
42 </body>
43 </html>
    View Code

    阻止事件:
    return false # 将阻止后面的事件发生，默认是return true

    # 当页面框架加载完成后，自动执行
    $(function(){
    $(绑定事件默认执行的操作)
    })

    举例:
    /*通过return false 阻止后面href事件的发生*/
    <a onclick='return clickon()' href='http://www.baidu.com'>let go</a>
    <a id='i1' href='http://www.baidu.com'>letgo2</a>
    <script>
    /*dom*/
    function clickon(){
    alert(123);
    return false;
    </script>
    <script src='jquery-1.12.4.js'></script>
    <script>
    /*jquery*/
    $('#i1').click(function(){
    alert(456)
    return false; # 阻止后续事件的发生
    })
    </script>
    return false: 后面的href将停止链接

    实例：表单验证.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .error{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 <form id='f1' action="s1.html">
14     <div><input name='n1' type="text" /></div>
15     <div><input name='n2' type="password" /></div>
16     <div><input name='n3' type="text" /></div>
17 
18     <input type="submit" value="提交"/>
19     <img src="...">
20 </form>
21 <script src="jquery-1.12.4.js"></script>
22 <script>
23     /*当页面框架加载完毕后，会自动执行，注，不需要等待图片加载完成，只加载图片的框架，和下面的区别*/
24 //    $(function () {
25 //
26 //    })
27 
28     /*当上面所有元素完全加载完毕后，才会执行,注意，需要等待图片加载完成*/
29     $(':submit').click(function () {
30         var flag = true;
31         $('.error').remove(); /*清空错误提示的样式*/
32         $('#f1').find('input[type="text"],input[type="password"]').each(function () {
33             var v = $(this).val();
34             /*当输入框为空，将创建错误提示*/
35             if(v.length <= 0){
36                 flag = false;
37                 var tag = document.createElement('span');
38                 tag.className='error';
39                 tag.innerHTML = '必填';
40                 $(this).after(tag);
41 //                return flag; /*只结束当前循环*/
42             }
43         });
44         return flag; /*结束整个循环*/
45     })
46 </script>
47 </body>
48 </html>
    View Code

    jquery 扩展，使用自执行函数封装扩展，避免全局变量冲突。
    - $.extend 执行： $.方法
    - $.fn.extend 执行 $(..).方法

    实例：jquery扩展.html

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <script src="jquery-1.12.4.js"></script>
 9 <script>
10     //jquery扩展第一种，自定义jquery的方法,使用extend，内部是一个字典
11     $.extend({
12         'name':function () {
13             return 'jack';
14         }
15     });
16     var v = $.name(); /*方法调用*/
17     alert(v);
18     //jquery扩展第二种，
19     $.fn.extend({
20         'name':function () {
21             return 'jack';
22         }
23     });
24     var v = $('#i1').name();
25     alert(v)
26 </script>
27 </body>
28 </html>
    View Code

    js扩展引入方法：
    将jqeury扩展代码写入到js文件中，引入方法：
    <script src='js自定义文件.js'></script>
    <script>
    var v = $.自定义的方法名()
    alert(v)
    </script>
    自执行函数，可以封装js扩展
    (function(){
    var status = 1;
    // 封装变量
    })(jquery)
  • 相关阅读:
    paraview添加vector
    origin横纵坐标颠倒
    [转] python提取计算结果的最大最小值及其坐标
    康奈尔大学CFD课程
    anaconda多环境配置
    mfix的Negative gas density报错解决
    python基础补漏-01
    ssh 公钥登陆的问题
    多进程
    关于GIL
  • 原文地址：https://www.cnblogs.com/zy6103/p/7402999.html
Copyright © 2020-2023  润新知