首页 > Web开发 > 详细

jQuery

时间:2020-04-09 16:25:31      阅读:59      评论:0      收藏:0      [点我收藏+]

jQuery参考网站

W3school

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结构(例如迭代和数组操作等)的增强
jQuery作用

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>
jQuery四种绑定方式比较

  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>
使用hover动态绑定事件

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-width: 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>
input框输入补全提示 监听 up/down事件
技术分享图片
<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>
form表单提交前数据验证

 

jQuery

原文:https://www.cnblogs.com/jiaxinzhu/p/12667156.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!