zoukankan      html  css  js  c++  java
  • 前端开发工具之jQuery

    jQuery

      jQuery是一个轻量级的JavaScript第三方库,能够简单方便的进行JavaScript编程。

      jQuery选择器

        1,id选择器:

    $("#id")

        2,标签选择器:

    $("标签名")

        3,类选择器:

    $(".类名")

        4,限定选择器:

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

        5,全局选择器:

    $("*")  // 找到所有

        6,多项选择器:

    $("#id, .类名, 属性名")

        7,层级选择器:x和y可以为任意选择器

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

        8,属性选择器:

    $(input [type])           // 找到有type属性的input标签
    $(input [type="text"])    // 找到type属性值为text的input标签
    $(input [type="text"])    // 找到type属性值不为text的input标签

        9,选择器的筛选:

    :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标签

        10,from表单常用筛选:

    :text        // 筛选type是text的标签
    :password    // 筛选type是password的标签
    :file        // 筛选type是file的标签
    :radio       // 筛选type是radio的标签
    :checkbox    // 筛选type是checkbox的标签
    
    :submit      // 筛选type是submit的标签
    :reset       // 筛选type是reset的标签
    :button      // 筛选type是button的标签

          表单属性筛选:

    :enabled    // 筛选出可用的input标签
    :disabled   // 筛选出不可用的input标签
    :checked    // 筛选出有checkbox选项被选中的input标签
    :selected   // 筛选出有select选项被选中的option标签

      jQuery筛选器

        1,筛选某jQuery对象的下面的元素

    jQuery对象.next()  // 筛选出某jQuery对象下面的第一个元素
    jQuery对象.nextAll()  // 筛选出某jQuery对象下面的全部元素
    jQuery对象.nextUntil("选择器")  // 筛选出某jQuery对象下面的元素,直到遇到指定的元素为止

        2,筛选某jQuery对象的上面的元素

    jQuery对象.prev()  // 筛选出某jQuery对象上面的第一个元素
    jQuery对象.prevAll()  // 筛选出某jQuery对象上面的全部元素
    jQuery对象.prevUntil("选择器")  // 筛选出某jQuery对象上面的元素,直到遇到指定的元素为止

        3,筛选某jQuery对象的父元素

    jQuery对象.parent()  // 筛选出某jQuery对象的父元素
    jQuery对象.parents()  // 筛选出某jQuery对象的全部父级元素
    jQuery对象.parentsUntil("选择器")  // 筛选出某jQuery对象的父级元素,直到遇到指定的元素为止

        4,筛选某jQuery对象的子元素

    jQuery对象.children()  // 筛选出某jQuery对象的子元素

        5,筛选某jQuery对象的兄弟元素

    jQuery对象.siblings()  // 筛选出某jQuery对象的兄弟元素

        6,常用于和筛选组合方法

    .find()   // 从前面的jQuery对象中找出符合条件的元素
    .first()  // 获取匹配的第一个元素
    .last()   // 获取匹配的最后一个元素
    .not()    // 从匹配元素的集合中删除与指定表达式匹配的元素
    .has()    // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

      jQuery标签操作

        1,操作标签样式

    jQuery标签对象.addClass("类名")   // 给标签添加CSS类名
    jQuery标签对象.removeClass("类名")   // 删除CSS类名
    jQuery标签对象.hasClass("类名")   // 判断是否有此CSS类
    jQuery标签对象.toggleClass("类名")   // 判断是否有此CSS类,有就删除,没有添加

        2,获取标签位置

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

        3,获取标签尺寸

    jQuery对象.width()  // 获取宽度
    jQuery对象.height()  // 获取高度
    jQuery对象.innerWidth()  // 获取内容宽度加padding宽度
    jQuery对象.innerHeight()  // 获取内容高度加padding高度
    jQuery对象.outerWidth()  // 获取内容宽度加padding宽度再加border宽度
    jQuery对象.outerHeight()  // 获取内容高度加padding高度再加border高度

        4,操作HTML代码

    jQuery对象.html()   // 获取第一个匹配元素的html内容,要获取每个就遍历对象再获取
    jQuery对象.html("新的内容")  // 将匹配到的元素设置为新内容

        5,操作标签的文本内容

    jQuery对象.text()   // 获取匹配元素的所有内容
    jQuery对象.text("新内容")   // 将匹配元素的所有内容设置为新内容

        6,操作标签中的value值

    jQuery对象.val()  // 获取第一个匹配元素的当前值
    jQuery对象.val("value值")  // 将匹配元素中有指定值的元素选中展示出来
    jQuery对象.val(["value值1", "value值2"])  // 设置checkbox、select的值

        7,操作标签属性

    jQuery对象.attr("属性名")  // 获取匹配到的第一个元素的属性值
    jQuery对象.attr("属性名","属性值")  // 为匹配到的元素设置属性
    jQuery对象.attr({"属性名1":"属性值1","属性名2":"属性值2"})  // 为匹配到的元素设置多个属性
    jQuery对象.removeAttr("属性名")   // 删除匹配元素中的一个属性
    
    // 对于checkbox和radio使用下面的方法操作属性
    .prop("属性名")  // 获取属性值
    .prop("属性名","属性值")  // 设定属性
    .removeProp("属性名")  // 删除属性 

      jQuery文档处理

        1,在指定元素内部的前面添加新的HTML代码

    jQuery对象a.prepend(jQuery对象b)   // 将对象b添加到对象a的前面
    jQuery对象a.prependTo(jQuery对象b)   // 将对象a添加到对象b的前面

        2,在指定元素内部的后面添加新的HTML代码

    jQuery对象a.append(jQuery对象b)   // 将对象b添加到对象a的后面
    jQuery对象a.appendTo(jQuery对象b)   // 将对象a添加到对象b的后面

        3,在指定元素外部的前面添加新的HTML代码

    jQuery对象a.before(jQuery对象b)   // 将对象b添加到对象a的前面
    jQuery对象a.insertBefore(jQuery对象b)   // 将对象a添加到对象b的前面

        4,在指定元素外部的后面添加新的HTML代码

    jQuery对象a.after(jQuery对象b)   // 将对象b添加到对象a的后面
    jQuery对象a.insertAfter(jQuery对象b)   // 将对象a添加到对象b的后面

        5,删除和清空指定的元素

    jQuery对象.remove()  // 删除元素本身以及内部的所有元素
    jQuery对象.empty()   // 清空元素内部的所有元素,不包含本身

        6,元素替换

    jQuery对象.replaceWith(替换内容)   // 将对象替换为新内容
    替换内容.replaceAll(jQuery对象)   // 用新内容替换对象

         7,元素克隆

    jQuery对象.clone()  // 克隆一个新元素   有参数true,添加true带元素本身的事件也会克隆

      jQuery事件

        1,常用事件

    click  // 单击
    dblclick  // 双击
    mouseenter  // 鼠标移动到标签上
    mouseleave   // 鼠标离开标签
    
    keydown      // 按键被按下
    keyup       // 按键被松开
    
    submit    // submit按钮按下时
    change    // 表单的元素的值被改变时
    focus        // 当鼠标点击选中的元素或tab键定位元素时
    blur     // 当选中的元素失去焦点时

        2,事件绑定

    某标签.on(events,selector,function(){})
    
    // events为事件   selector为选择器(特定条件下使用)  function为事件要进行的函数

        3,事件委托

          通过给父标签绑定事件,在加上选择器进行限定,从而利用父标签去捕获子标签的事件。

    父级标签.on(events,要触发事件的标签,function(){})

        4,事件移除

    某绑定过事件的标签.off(events)

        5,阻止后续事件执行

    return false;  // 在事件执行函数结束后如过返回的是false则后续的事件不会执行。

        6,页面载入

    $(document).ready(function(){
    // 在这里写你的JS代码...
    })
    // 这个函数可以极大的提高web应用程序的响应速度,优化页面载入。

     

  • 相关阅读:
    使用VideoView开发视频总结
    后台接口向数据库录入汉字时乱码以及自动过滤文字经验总结
    8 Crash Reporting Tools For iOS And Android Apps
    Best Mobile Crash Reporting Software
    How do I obtain crash-data from my Android application?
    ACRA (Automated Crash Reporting for Android)
    Debugging Neural Networks with PyTorch and W&B
    OpenPose MobileNet V1
    Real-time-human-pose-estimation-by-pytorch
    openpose-pytorch
  • 原文地址:https://www.cnblogs.com/zxc-Weblog/p/8576101.html
Copyright © 2011-2022 走看看