05: jQuery

目录：

jQuery参考网站

W3school

• 1.1 JQuery作用
• 1.2 jQuery与DOM比较 与 相互转换
• 1.3 jQuery选择器
• 1.4 jQuery筛选与过滤
• 1.5 jQuery表单
• 1.6 补充 JQuery常用查找方法补充
• 1.7 jQuery文本与属性操作
• 1.8 CSS操作
• 1.9 文档处理
• 1.10 JQuery事件绑定的四种方式
• 1.11 jQuery使用

1.1 JQuery作用     返回顶部

　　简介：jQuery库为Web脚本编程提供了通用的抽象层，使得它几乎适用于任何编程的情形。

# # 第一：取得页面中的元素
#       1、    如果不使用JavaScript库，遍历DOM树，以及查找HTML文档结构中某个特殊的部分，必需编写很多代码
#       2、    jQuery为准确获取需要操纵的文档元素，提供了可靠而富有效率的选择符机制。

# # 第二：修改页面的外观
#       1、    CSS虽然为呈现方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会
#          显得力不从心
#       2、    jQuery可以弥补这一不足，它提供了跨浏览器的标准来解决方案。
#       3、    而且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或都个别的样式属性。

# # 第三：改变页面的内容
#       1、    jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码
#       2、    jQuery就能改变文档的内容，可以改变文本、插入或都翻转图像、对列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需要一个简单易用的API。

# # 第四：响应用户的页面操作
#       1、    jQuery提供了截取形形色色的页面事件（比如用户单击一个链接）的适当方式，而不需要使用事件处理程
#         序搞乱HTML代码
#       2、    此外，它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性

# # 第五：为页面添加动态效果
#       1、    为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈
#       2、    jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利

# # 第六：无需刷新页面
#       1、即可从服务器获取信息，这种编程模式就是从所周知的AJAX（Asyynchoronous JavaScript and XML），它能辅
#          助Web开发人员创建出反应灵敏、功能丰富的网站
#       2、jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计

# # 第七：简化常见的JavaScript任务
#       1、除了这些完全针对文档的特性之外，jQuery也提供了对基本的JavaScript结构（例如迭代和数组操作等）的增强

1.2 jQuery与DOM比较 与 相互转换     返回顶部

　　　　1.  $=jQuery   可以使用这两个关键字调用jQuery中的方法

　　　　2.  JQuery内部实质上封装的是DOM，JQuery中获得的东西比DOM获得的多

　　　　3.  JQuery对象返回的是一个列表，列表中第0个元素就是用DOM获取的对象

　　　　4.  分别用JQuery和DOM获取对象的方法：

　　　　　　　　$("#i1")                                                            #使用JQuery获取对象

　　　　　　　　document.getElementById('i1');                      #使用DOM获取对象

　　　　5.  将通过JQuery获取的对象转换成通过DOM获取的对象

　　　　　　　　jquery对象[0]       =>           Dom对象

　　　　　　　　$("#i1")[0] = document.getElementById('i1');                 #JQuery第0个元素就是DOM对象

　　　　6.  将通过DOM获取的对象装换成通过JQuery获取的对象

　　　　　　　　dom对象          =>               $(Dom对象)

　　　　　　　　d = document.getElementById('i1');

　　　　　　　　$(d)  =  $("#i1")                                                              #DOM对象用$()包起来就是JQuery对象

1.3 jQuery选择器     返回顶部

　　1、基本选择器

　　　　1. id选择器

　　　　　　　　$("#i1")                 #找到id=i1的标签

　　　　2. class选择器

　　　　　　　　$(".c1")

　　　　3. 标签选择器

　　　　　　　　$('a')                   #找到所有a标签

　　　　4. 组合选择器

　　　　　　　　$('a,.c2,#i10')     # 作用：找到所有a标签和所有class等于.c2的标签和id=i10的所有标签

　　　　5. 匹配所有元素，多用于结合上下文来搜索。

　　　　　　　　$("*")

　　2、层级选择器
　　　　　　1.   $('#i1 a')                        #找到id=i1标签下面所有的a标签（子子孙孙都找到）

　　　　　　2.   $('#i1>a')                      #找到id=i1标签下面所有的a标签（只能找到儿子）

　　　　　　3.   $("label + input")            #匹配所有跟在 label 后面的 input 元素

　　　　　　4.   $("form ~ input")            #找到所有与表单同辈的 input 元素

　　3、属性
　　　　　　1. $('[alex]') #找到具有alex属性的标签（比如：alex='123'，alex='456'）

　　　　　　2. $('[alex="456"] #只找到标签中alex='456'的标签（属性：alex;值：456）

1.4 jQuery筛选与过滤     返回顶部

　　1、查找

　　　　　　1.  $("p").parent()                                   #取得一个包含着所有匹配元素的唯一父元素的元素集合

　　　　　　     $("span").parents()                           # parents()将查找所有祖辈元素

　　　　　　     $('#i1').parentsUntil('.c1')                  #查找当前元素的所有的父辈元素，直到遇到匹配元素为止

　　　　　　2.  $("div").children()                              # children()只考虑子元素而不考虑所有后代元素

　　　　　　3.  $("div").siblings()                              #获取所有兄弟标签，不包含自己

　　　　　　4.  $("p").next()                                     #获取匹配标签后面的兄弟标签

　　　　　　     $("div:first").nextAll().addClass("after");                        #查找当前元素之后所有的同辈元素。

　　　　　　     $(‘#i1’).nextUntil(‘#i2’)                      #查找当前元素之后所有的同辈元素，直到遇到匹配元素为止

　　　　　　5. $("p").prev()                                      #用于筛选前一个同辈元素的表达式

　　　　　　     $("div:last").prevAll().addClass("before");                     #查找当前元素之前所有的同辈元素

　　　　　　     $(‘#i1’). prevUntil (‘#i2’)                    #查找当前元素之前所有的同辈元素，直到遇到匹配元素为止

　　　　　　6.  $("p").find("span")                            #搜索所有与指定表达式匹配的元素, 子子孙孙中查找

　　2、基本筛选器

　　　　　　1.  $('a:first')                               #找到所有a标签，只过滤出第一个

　　　　　　     $('a:last')                              #找到所有a标签，只过滤出最后一个

　　　　　　2.  eq(index)                                 #通过索引提取出对应的值（索引从0开始）

　　　　　　     $('a:eq(0)')                               #找到所有a标签中索引为0的元素

　　　　　　3.  :even                                        #找到偶数行

　　　　　　     :odd                                         #找到奇数行

　　　　　　4.  :gt(index)                                 #索引大于多少

　　　　　　     :lt(index)                        #索引小于多少

　　　　　　5.  :header                          #找到所有的h标题标签

　　　　　　6.  $("input:not(:checked)")         #查找所有未选中的 input 元素

　　3、过滤

　　　　　　作用：在选择器选择到的所有标签的基础上再选择一次

　　　　　　1） $(‘li’).eq(1)                              #先找到所有li标签，然后再过滤出索引为1的

　　　　　　2） $('li').first()                              #找到所有li标签过滤出的第一个

　　　　　　      $('li').last()                               #找到所有li标签过滤出最后一个

　　　　　　3） hasClass(class)                        #检查当前的元素是否含有某个特定的类，如果有，则返回true

1.5 jQuery表单     返回顶部

　　1、表单

　　　　　　1. $('#i1 input') 和 $('#i1 :input')区别

　　　　　　　　　　$('#i1 input')                   #只能匹配i1孩子中的所有input标签

　　　　　　　　　　$('#i1 :input')                  #不仅可以匹配input标签，也可以匹配select，textarea，button标签

　　　　　　2. $('#i1 :text')                              # 匹配所有的单行文本框

　　　　　　3. :password                                # 匹配所有密码框

　　　　　　4. :radio                                       # 匹配所有单选按钮

　　　　　　5. :checkbox                               # 匹配所有复选框

　　　　　　6. :submit                                    # 匹配所有提交按钮

　　　　　　7. :image                                     # 匹配所有图像域

　　　　　　8. :reset                                      # 匹配所有重置按钮

　　　　　　9. :button                                    # 匹配所有按钮

　　　　　　10. :file                                       # 匹配所有文件

　　2、表单对象属性

　　　　　　1. $('#i2 :enabled')             # 查找所有可编辑input元素（即，没有disabled="disabled参数）

　　　　　　     $('#i2 :disabled')           # 查找所有不可编辑的input元素（input中有disabled="disabled参数）

　　　　　　2. :checked                       # 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected

　　　　　　3. :selected                       # 匹配所有选中的option元素

　　　　　　4. :enabled                       # 可编辑的

　　　　　　5. :disabled                       # 不可编辑的

1.6 补充 JQuery常用查找方法补充     返回顶部

　　　　　　1.  $('.modal input[name="port"]')                                                              #作用是查找class=’modal’下面的input属性name=”port”

　　　　　　2.  var val = $(this).prop('checked')?false:true                                          #$(this).prop('checked')返回true那么val=false，反之为true

　　　　　　3.  $('#edit_form').find('input[name="nid"]')

　　　　　　4.  $("input[tag='obj_checkbox']:checked").each(function () {});        #找到所有有tag='obj_checkbox'属性并且勾选中的标签

　　　　　　5.  $('form').find("[disabled]").removeAttr('disabled');                                #找到并移除form标签转中所有disabled属性

　　　　　　6. $("div.comment_container").removeClass('hide')                                 #找到所有class=comment_container并移除class=hide

　　　　　　7. $('.comment').children(".comment_text");                                             #找到class='comment' 下所有孩子标签中class='comment_text'

　　　　　　8. $('.post_container').children().remove()                                               #找到class='post_container'的所有标签，并清空

1.7 jQuery文本与属性操作     返回顶部

　　1、文本操作

　　　　　　1.  $('#i1').text()                                            #获取文本内容

　　　　　　     $('#i1').text(“新内容”)                              #将标签中内容替换成“新内容”

　　　　　　2.  $('#i1').html()                                          #获取整个标签

　　　　　　     $('#i1').html("<p>aaaaaaa</p>")            #替换标签中的标签

　　　　　　3.  $('#i2').val()                                            #获取value的值（比如input框中内容）

　　　　　　     $('#i2').val('2222')                                  #将输入框中的值替换成：2222

　　2、属性操作

　　　　　　<input id="i1" type="button" value="开关" />

　　　　　　1. attr()   #传入一个值是获取属性，传入两个值是设置属性

　　　　　　     $('#i1').attr('type')                           #获取id=i1标签的type属性的值（结果：button）

　　　　　　     $('#i1').attr('type','text')                   #将id=i1标签的属性修改成text

　　　　　　2. $('#i1').removeAttr('type')                 #删除其中的type="button”这个属性

　　　　　　3. prop #专门用于checkbox,radio标签操作

　　　　　　     <input type='checkbox' id='i2' />

　　　　　　     $('#i2').prop('checked')                            #获取值：选中结果是true未选中结果是false

　　　　　　      $('#i2').prop('checked',true)                         #将checkbox多选框选中

　　　　　　4. 判断是否具有某个属性

　　　　　　　　if(  !$("#display_name")[0].hasAttribute('is_login')  ){}

1.8 CSS操作     返回顶部

 　　1、添加或删除id、或class属性

　　　　1.  addClass()

　　　　　　　　$("p").addClass("c1");                 # 添加c1样式

　　　　2.  removeClass()                                

　　　　　　　　$("p").removeClass("c1");           # 清除c1样式

　　　　3.  hasClass(class)  

　　　　　　　　 hasClass(class)                        #检查当前的元素是否含有某个特定的类，如果有，则返回true

 　　2、添加style属性

　　　　　　1.  $("p").css("color");                                       #取得第一个段落的color样式属性的值（1.9+版本）

　　　　　　2.  $("p").css({ "color": "#ff0011"});                  #将所有段落的字体颜色设为红色（1.9+版本）

　　　　　　3.  $(tag).css('color','green');                             #将获取的标签字体设置成绿色（1.0版本） 

　　　　　　     $(this).css({"border":"1px solid red"});

　　3.2 CSS：位置

　　　　　　1.  $(window).scrollTop()                                  #获取Windows窗口滚轮位置（没有值是获取值）

　　　　　　     $(window).scrollTop(0)                                #返回顶部（有值就是设置值）

　　　　　　2.  scrollLeft()                                                   #和scrollTop()相似

　　　　　　3.  offset()                                                        #获取匹配元素在当前视口的相对偏移

　　　　　　     $("p:last").offset({ top: 10, left: 30 });          #设置匹配元素在当前窗口的偏移

　　　　　　4.  position()                                                    #获取匹配元素相对父元素的偏移（与父标签偏移）

　　　　　　                                                                       # 常用于relative和position结合的相对定位中

　　　　　　                                                                       # 找到的父标签一定是relative所在标签

　　4、CSS：尺寸

　　　　　　1.  $('i1').height()                            # 获取标签的高度 纯高度（没有边框宽度）

　　　　　　2.  $('i1').innerHeight()                   #获取第一个匹配元素内部区域高度（包括补白、不包括边框）

　　　　　　3.  $('i1').outerHeight()                   #获取第一个匹配元素外部高度（默认包括补白和边框）

　　　　　　4.  $('i1').outerHeight(true)             #设置为 true 时，计算边距在内

1.9 文档处理     返回顶部

　　1、文档处理：内部插入

　　　　　　1.  $('#u1').append("<b>Hello</b>");               #向id=u1的孩子标签最下面添加

　　　　　　2.  $('#u1'). prepend("<b>Hello</b>");            #向id=u1的孩子标签最上面添加

　　　　　　3.  appendTo()                                                 #把匹配的元素追加到另一个指定元素元素后面

　　　　　　4.  prependTo()                                                 #把匹配的元素追加到另一个指定元素元素前面

　　2、 文档处理：外部插入

　　　　　　1.  $('#u1'). after("<b>Hello</b>");                   #向id=u1的兄弟标签下面添加

　　　　　　2.  $('#u1'). before("<b>Hello</b>");

　　3、 文档处理：删除

　　　　　　1.  $('#u1 li').eq(index).remove();                     #将找到的元素根据索引值删除（删除整个标签）

　　　　　　2.  $('#u1 li').eq(index).empty();                       #将找到的元素根据索引值删除（仅删除标签内容）

　　4、 文档处理：复制                                  #把DOM文档中元素的副本添加到其他位置时这个函数非常有用

　　　　　　1.  clone()                                                         #<b>Hello</b><p>, how are you?</p>

　　　　　　     $("b").clone().prependTo("p");                     #<b>Hello</b><p><b>Hello</b>, how are you?</p>

1.10 JQuery事件绑定的四种方式     返回顶部

　　1、$('.c').click(function(){ })没有解绑方法

　　2、bind绑定和解绑

　　　　　　$('.c1').bind('click',function(){ })

　　　　　　$('.c1').unbind('click',function(){ })

　　3、on绑定和解绑

　　　　　　$('.c1').on('click', function(){ })

　　　　　　$('.c1').off('click', function(){ })

　　4、delegate绑定和解绑

　　　　　　$('.c').delegate('a', 'click', function(){ })

　　　　　　$('.c').undelegate('a', 'click', function(){ })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        //第一种绑定：直接使用.事件名绑定
        $('ul li').click(function () {
            var v = $(this).text();
            alert(v);
        });

        //第二种绑定：使用bind关键字绑定
        $('ul li').bind('click',function () {
            var v = $(this).text();
            alert(v);
        });

        //第三种绑定：使用on绑定
        $('ul li').on('click', function () {
            var v = $(this).text();
            alert(v);
        });

        //第四种绑定：使用delegate绑定
        //委托：当点击的时候就会绑定并且执行（让增加一些东西又有相同功能时使用）
        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })
    </script>
</body>
</html>

　　5、使用hover动态绑定事件　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="user_info">使用hover触发JS函数</div>

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

    <script>
        $(function () {
            $("div.user_info").hover(function () {
                show_user_menu(true);
            },function () {
                show_user_menu(false)
            });

            function show_user_menu(tag) {
                if(tag==true){
                    console.log('true')
                }else {
                    console.log('false')
                }
            }
        })
    </script>
</body>
</html>

1.11 jQuery使用     返回顶部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全选" id="allCheck">
    <input type="button" value="取消" id="allCancel">
    <input type="button" value="反选" id="reverse">
    <span id="edit" >编辑模式</span>

    <table border="1">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
                <th>状态</th>
            </tr>
        </thead>

        <tbody id="tb">
            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在线</option><option>下线</option></select></td>
            </tr>


        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>

        // 1、全选
        $('#allCheck').click(function(){
            $('#tb :checkbox').prop('checked',true).trigger('change');
        });

        // 2、取消
        $('#allCancel').click(function(){
            $('#tb :checkbox').prop('checked',false).trigger('change');
        });

        // 3、反选
        $('#reverse').click(function(){
            $('#tb :checkbox').each(function(){
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v).trigger('change');
            })
        });

        // 4、当点击“编辑模式”按钮时出发该函数，将所有有edit属性的去除 disabled 属性
        $('#edit').click(function(){
            $('#tb :checkbox').each(function(){
                var v = $(this);
                if(v.hasClass('edit')){
                    $('#edit').css('backgroundColor','');
                    v.removeClass('edit')
                }else{
                    $('#edit').css('backgroundColor','red');
                    v.addClass('edit')
                };

                // 当点击“编辑模式”按钮时进行判断，将可编辑的去除 disabled 属性
                if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
                    $(this).parent().siblings().children().removeAttr('disabled')
                }else{
                    $(this).parent().siblings().children().attr('disabled','disabled');
                }
            })
        });

        // 5、当勾选时出发该函数，如果是‘编辑模式’将所有有edit属性的去除 disabled 属性
        $('#tb :checkbox').change(function(){

            if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
                $(this).parent().siblings().children().removeAttr('disabled')
            }else{
                $(this).parent().siblings().children().attr('disabled','disabled')
            }
        })
    </script>

</body>
</html>

    <script src="/static/js/myjs/jquery.cookie.js"></script>
    <script>
        // 当框架加载完成后执行此函数
        window.onload = function(){
                var v = $.cookie('history_page');
                if(v){
                    $("#mytab [type_name=" + v + "]").next().click()
                }
            };

        // 使用cookie解决页面跳转问题
        function add_cookie(tag) {
            $.cookie('history_page',tag, { expires: 1 });
        }

    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        ul li:hover,
        ul li.hover {
            background: #efefef;
        }
    </style>
</head>
<body>
  <div class="form-group">
   <label>添加审批人</label>
   <input autocomplete="off" type="text" name="addapproveuser" id="input-text" class="form-control"
   onkeydown="isDown(event)" />
   <ul id="listuser" class="list-unstyled" style="z-index:9;position: fixed;background-color: white;min- 540px">
    <li onclick="getLiValue(this)" style="margin: 8px;">18,肖乃强,DevOps</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">294,李肖峰,研发实施组</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">306,肖娟,医学数据</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">447,肖菲菲,医学数据PM</li>
   </ul>
  </div>
    <script src="jquery-1.12.4.js"></script>

    <script>
        // 点击li时使用li标签的值替换input中内容
        function getLiValue(ths) {
                lival = $(ths).text();
                inputval = $('#input-text').val(lival);
                $('#listuser').addClass('hidden');
                $('#input-text').focus();
                var index = $("#listuser li").index(ths);
                num = index;
                changeCurrentLiStyle()
            }



        var num = -1;  // 默认选中第几个li标签
        isFirst = true;  // 是否第一次按 up/down键
        function isDown(event) {
            if(event.keyCode==40){              // 按下down键
                num++;                           // 更改num
                changeCurrentLiStyle();          // 更新li的样式
                isFirst = false;                // 第一次已经过去了
            }

            if(event.keyCode==38){               // 按下up键
                    if (isFirst) {                   // 如果是第一次，不用减了
                        isFirst = false;            // 这次过去了，就不是第一次了
                    } else {
                        num--;
                    }
                    changeCurrentLiStyle();          // 更新li的样式
            }

            if(event.keyCode==13){                  // 按下enter键
                lival = $('.hover').text();
                inputval = $('#input-text').val(lival);
                $('#listuser').addClass('hidden');
            }
        }

        // 改变li样式
        function changeCurrentLiStyle() {
            var lis = $('#listuser li');
            if (lis.length === 0) {                                 // 判断li是否存在
                return;
            }
            var num = this.getNum(lis.length);                     // 获取索引值
            for (var i = 0; i < lis.length; i++) {                 // 排他法设置类
                lis[i].className = '';
            }
            lis[num].className = 'hover';                          // 当前li选中
        }

         // 获取最显著li的num值
        function getNum(len) {
        // 对于任意一个数（正数和负数）
        // 对len取余之后，保证在-len到len之间
        // var num = this.num % len;
        // // 此时加上len，保证是0到2*len之间，一定是正数了
        // num += len;
        // // 此时再取余，就保证是0到len之间了
        // num %= len
            return (num % len + len) % len
        }
    </script>
</body>
</html>

<form>
    <button type="submit" class="btn btn-info margin"
        onclick='return check_form(this.from)'
        name="action_status"
        value="4" >修改预计完成时间
    </button>
</form>

<script>
    function check_form() {
        var predict_time = $("#id_predict_time").val();
        if(!predict_time){
            $('#predict_time_null').text('预计完成时间 为必填字段');
            return false;
        }
    }
</script>