<thead id="r0gv5"><del id="r0gv5"></del></thead>

    <blockquote id="r0gv5"></blockquote>

  • jQuery

    jQuery

    jQuery对象

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。

    jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

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

    html()相当于: document.getElementById("i1").innerHTML;

    一个约定,我们在声明一个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")

    配合使用:

    $("div.c1")   // 找到有c1 class类的div标签

    所有元素选择器:

    $("*")

    组合选择器:

    $("#id, .className, tagName")

    层级选择器

    x和y可以为任意选择器

    $("x y"); // x的所有后代y(子子孙孙) 
    $("x > y"); // x的所有儿子y(儿子) 
    $("x + y") // 找到所有紧挨在x后面的y 
    $("x ~ y") // x之后所有的兄弟y

    基本筛选器

    :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样式类的li标签 
    $("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

    属性选择器

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

    例子:

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

    表单筛选器

    :text
    :password 
    :file
    :radio
    :checkbox
    :submit
    :reset
    :button

    例子:

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

    表单对象属性:

    :enabled
    :disabled
    :checked  //被选中的
    :selected

    例子:

    找到可用的input标签

    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
    
    $( "input:enabled")   // 找到可用的input标签

    找到被选中的option:

    <select id="s1">
      <option value="beijing">北京市</option>
      <option value="shanghai">上海市</option>
      <option selected value="guangzhou">广州市</option>
      <option value="shenzhen">深圳市</option>
    </select>
    
    $( "option:selected")   // 找到所有被选中的option

    筛选器方法

    下一个元素:

    $("#id" ).next()
    $( "#id" ).nextAll()
    $( "#id").nextUntil("#i2")

    上一个元素:

    $("#id" ).prev()
    $( "#id" ).prevAll()
    $( "#id").prevUntil("#i2")

    父亲元素:

    $("#id" ).parent()
    $( "#id" ).parents() //查找当前元素的所有的父辈元素
    $( "#id").parentsUntil() //查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

    儿子和兄弟元素:

    $("#id").children(); // 儿子们 
    $("#id").siblings(); // 兄弟们

    查找

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    $("div").find("p")

    //等价于$("div p")

    eg:
    $("div").find("p")
    r.fn.init(6)?[p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(39)]
                  
    $("div p")
    r.fn.init(6)?[p#p1, p.help-block, p#p2.divider, p#p3.divider, p, p, prevObject: r.fn.init(1)]

    筛选

    筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

    $("div").filter(".c1")   // 从结果集中过滤出有c1样式类的

    等价于$("div.c1")

    $("div").filter(".radio")
    r.fn.init(2)?[div.radio, div.radio, prevObject: r.fn.init(39)]
    
    $("div.radio")
    r.fn.init(2)?[div.radio, div.radio, prevObject: r.fn.init(1)]

    补充:

    .first() // 获取匹配的第一个元素 
    .last() // 获取匹配的最后一个元素 
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 
    .has() / / 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq() // 索引值等于指定值的元素
    $(".checkbox").first()
    r.fn.init?[div.checkbox, prevObject: r.fn.init(4)]
    
    $(".checkbox").last()
    r.fn.init?[div.checkbox, prevObject: r.fn.init(4)]
    
    $(".checkbox").not(".radio")
    r.fn.init(4)?[div.checkbox, div.checkbox, div.checkbox, div.checkbox, prevObject: r.fn.init(4)]
    
    $(".row").has(".o1")
    r.fn.init?[prevObject: r.fn.init(5)]
    
    $(".row").has(".form-group")
    r.fn.init?[div.row, prevObject: r.fn.init(5)]
    
    $(".row").eq(1)
    r.fn.init?[div.row, prevObject: r.fn.init(5)]

    操作标签

    样式操作

    样式类

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

    CSS

    css("color","red") // DOM操作:tag.style.color="red"
    var a = $(".checkbox [type='checkbox']").first()
    undefined
    
    console.log(a);
    VM4225:1 r.fn.init?[input, prevObject: r.fn.init(4)]
    undefined
    
    a.css("color","red")
    r.fn.init?[input, prevObject: r.fn.init(4)]

    示例:

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

    位置操作

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

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

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

    height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()

    文本操作

    HTML代码:

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

    文本值:

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

    值:

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

    例如:

    <select multiple id ="s1" >
        <option value ="1" > 1 </option>
        <option value ="2" > 2 </option>
        <option value ="3" > 3 </option>
        </select>
    <body>
     <input type ="checkbox" value ="basketball" name ="hobby" > 篮球
     <input type ="checkbox" value ="football" name ="hobby" > 足球
    </body>

    设置值:

    $("[name='hobby']").val(['basketball', 'football' ]);
    $( "#s1").val(["1", "2"])
    $("option")
    r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
    
    $("option").html()
    " 1 "
    
    $("option").text()
    " 1  2  3 "
    
    $("option").html('hhhgfdghjhg')
    r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
    
    $("option").text(123)
    r.fn.init(3)?[option, option, option, prevObject: r.fn.init(1)]
    
    $("[name='hobby']").val(['basketball', 'football' ]);
    r.fn.init(2)?[input, input, prevObject: r.fn.init(1)]
    
    $( "#s1").val(["1", "2"])
    r.fn.init?[select#s1]

    示例:

    获取被选中的checkbox或radio的值:

    <label for="c1">女</label>
    <input name="gender" id="c1" type="radio" value="0">
    <label for="c2">男</label>
    <input name="gender" id="c2" type="radio" value="1">

    可以使用:

    $("input[name='gender']:checked").val()

    prop和attr的区别:

    attr全称attribute(属性)

    prop全称property(属性)

    虽然都是属性,但他们所指的属性并不相同

    attr所指的属性是HTML标签属性

    prop所指的是DOM对象属性

    可以认为attr是显式的,而prop是隐式的

    举个例子:

    <input type="checkbox" id="i1" value="1">

    针对上面的代码,

    $("#i1").attr("checked")  // undefined
    $("#i1").prop("checked")  // false

    可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。

    如果换成下面的代码:

    <input type="checkbox" checked id="i1" value="1">

    再执行:

    $("#i1").attr("checked")   // checked
    $("#i1").prop("checked")  // true
    $("#i1").attr("checked")
    "checked"
    $("#i1").prop("checked")
    true

    这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。

    接下来再看一下针对自定义属性,attr和prop又有什么区别:

    <input type="checkbox" checked id="i1" value="1" me="自定义属性">

    执行以下代码:

    $("#i1").attr("me")   // "自定义属性"
    $("#i1").prop("me")  // undefined
    $("#i1").attr("me")
    "自定义属性"
    $("#i1").prop("me")
    undefined

    可以看到prop不支持获取标签的自定义属性。

    总结一下:

    1. 对于标签上有的能看到的属性和自定义属性都用attr
    2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

    文档处理

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

    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
    var a =$("#c1")
    undefined
    
    a
    r.fn.init?[input#c1]
               
    var b = $("#i1")
    undefined
    
    b
    r.fn.init?[input#i1]
               
    $(a).append(b)
    r.fn.init?[input#c1]0: input#c1length: 1__proto__: Object(0)
    $(b).appendTo(a)   //把b追加到a,和上年的例子一样

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

    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B

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

    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面    *****两个字母调换一下,意思就一样了

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

    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面

    移除和清空元素

    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点。
    var a = $("#c1")
    undefined
    
    a.empty()

    替换

    replaceWith()   //这个替换不是交换,而是把前面一个替换掉
    replaceAll()
    var a = $("#i2")
    undefined
    var b = $("#i3")
    undefined
    a.replaceWith(b)

    克隆

    clone()// 参数   //可能在代码里面不显示,但是在浏览器上就会发现他克隆了
    var a = $("#i1")
    undefined
    
    a.clone();
    r.fn.init?[input#i1, prevObject: r.fn.init(1)]

    克隆示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link  rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    <button>点我试试</button>
    <script>
        $("button").click(function () {
            $(this).clone(true).insertAfter(this)
        })
    </script>
    </body>
    </html>

    事件

    常用事件

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

    事件绑定

    两种绑定方法

    方法一
        $("button").click(function () {
            alert("您好啊")
        })
    
    方法二(推荐)
        $("button").on("click",function () {
            alert("你好啊")
        })
    1. .on( events [, selector ],function(){})
    • events: 事件
    • selector: 选择器(可选的)
    • function: 事件处理函数

    移除事件

    1. .off( events [, selector ][,function(){}])

    off() 方法移除用 .on()绑定的事件处理程序。

    • events: 事件
    • selector: 选择器(可选的)
    • function: 事件处理函数

    阻止后续事件执行

    1. return false; // 常见阻止表单提交等
    2. e.preventDefault();
    3. 注意:

    像click、keydown等DOM中定义的事件,我们都可以使用.on()方法来绑定事件,但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

    想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件:

    $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
        $(this).addClass('hover');
    });
    
    $('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
        $(this).removeClass('hover');
    });

    阻止事件冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link  rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <style>
            #a{
                width: 500px;
                height: 500px;
                background-color: red;
            }
             #b{
                width: 400px;
                height: 400px;
                background-color: green;
            }
            #c{
                width: 200px;
                height: 200px;
                background-color: black;
            }
    
        </style>
        <script>
      
             $(function(){
    
                $("#a").on("click",function () {
                    alert("第1")
                });
                $("#b").on("click",function (e) {
                    alert("第2")
                       e.stopPropagation()   //就这个东西阻止了事件冒泡
                });
                $("#c").on("click",function (e) {
                    alert("第3");
    
                });
    
            })
    
    </script>
    </head>
    <body>
    <div id="a">
        <div id="b">
            <div id="c"></div>
        </div>
    </div>
    
    
    </body>
    </html>

    事件委托

    事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。

    示例:

    表格中每一行的编辑和删除按钮都能触发相应的事件。

    $("table").on("click", ".delete", function () {
      // 删除按钮绑定的事件
    })

    实时监听input输入值变化示例:

    <!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>实时监听input输入值变化</title>
    </head>
    <body>
    <input type="text" id="i1">
    
    <script src="jquery-3.2.1.min.js"></script>
    <script>
      /*
      * oninput是HTML5的标准事件
      * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
      * 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
      * oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
      * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
      * */
      $("#i1").on("input propertychange", function () {
        alert($(this).val());
      })
    </script>
    </body>
    </html>

    动画效果

    // 基本
    show([s,[e],[fn]])  //里面是毫秒
    hide([s,[e],[fn]])
    toggle([s],[e],[fn])
    // 滑动
    slideDown([s],[e],[fn])
    slideUp([s,[e],[fn]])
    slideToggle([s],[e],[fn])
    // 淡入淡出
    fadeIn([s],[e],[fn])
    fadeOut([s],[e],[fn])
    fadeTo([[s],o,[e],[fn]])
    fadeToggle([s,[e],[fn]])
    // 自定义
    animate(p,[s],[e],[fn])
    相关文章
    相关标签/搜索
    六??彩香港管家婆