zoukankan      html  css  js  c++  java
  • Jquery的一些常见用法

    谨以此文怀念我们大学的时光,Jquery3.4.0下载 https://code.jquery.com/jquery-3.4.0.min.js

    ⒈常用方法

    $("#div1").html() 等价于document.getElementById("div1").innerHTML()
    $(dom对象) 将Dom对象转换为Jquery对象
    var jq = $(div1)[0] = $(div1).get(0) 将Jquery对象转换为Dom对象
    $("#div").css("background") 取得Id为div元素的背景色
    $("#un").val("abc") 设置Id为un的元素的value值为abc

    ⒉常用选择器

    $("#div") 根据Id选择
    $(".css") 根据Class选择
    $("p") 根据标签选择
    $("p,div,span.css1") 选中p标签、div标签以及拥有css1样式的span标签
    next() 下一个元素,可添加选择器
    nextAll() 下一个之后所有元素,可添加选择器
    siblings() 所有的同等元素获取,可添加选择器(不包括当前)

    ⒊层级选择

    $("div li") 获取div下所有li元素(后代、子、子的子、子的子的子....)
    $("div > li") 仅获取当前div层下的li元素
    $(".css1 + div") 获取css1样式之后的第一个div元素
    $(".css1 ~ div") 获取css1样式之后的所有div元素

    ⒋过滤器

    用法 示例 说明
    :first $("div:first") 选取第一个<div>
    :last $("div:last") 选取最后一个<div>
    :not(条件) $("input:not(.myclass)") 选取样式名不为myclass的input
    :even | :odd $("input:even")

    选取索引是奇数还是偶数的元素

    当前示例为选取索引是奇数的<input>

    :eq(索引) | :gt(索引) | :lt(索引) $("input :eq(1)")

    选取索引等于、大于或小于索引的元素

    当前示例为选取索引等于1的<input>

    :header $(:header)

    选取所有h1...h6的元素

    :animated $("div :animated") 选取正在执行动画的<div>元素
    $(this) $("td",$(this)) 选取当前td

    ⒌属性过滤选择器

    $("div[id]") 选取有id属性的<div>
    $("div[title=test]") 选取title属性为test的<div>
    $("input[name=abc]") getElementsByName
    $("div[title != test]") 选取title属性不为test的<div>

    ⒍表单对象过滤选择器

    $("#form1 :enabled") 选择id为form1的表单内所有启动的元素
    $("#form1 :disabled") 选取id为form1的表单内所有禁用的元素
    $("input :checked") 选取所有选中的元素(radio、checkbox)
    $("select :selected") 选取所有选中的选项元素(下拉列表)

    ⒎表单选择器

    $(":input") 选取所有<input>、<textarea>、<select>和<button>元素,和$("input")不一样,$("input")只获得<input>元素
    $(":text") 选取所有单行文本框,等价于$("input :[type=text]")
    $(":password") 选取所有密码框,同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等

     ⒏DOM操作相关

      1.使用html()方法读取或设置元素的innerHTML

        $("a:first").html("hello");

      2.使用text()方法读取或设置元素的innerText

        $("a:first").text("hello");

      3.使用attr()方法读取或设置元素的属性,对于Jquery没有封装的属性用attr进行操作

        $("a:first").attr("href","www.baidu.com");

      4.使用removeAttr删除属性,删除的属性在源代码中看不到,这是和清空属性的区别。

        略

      5.动态创建dom节点,使用$(html字符串)创建Dom节点,该方法返回一个Jquery对象,然后调用append等方法将创建的节点添加到Dom中。

        var link = $("<a href='https://www.baidu.com'>百度</a>");

        $("div:first").append(link);

    append 在元素的末尾添加dom节点
    prepend 在元素的开始添加dom节点
    after 在元素之后添加dom节点(添加兄弟节点)
    before 在元素之前添加dom节点

      6.删除节点

        ①remove()  删除选择节点

          $("ul li.testitem").remove();

          删除ul下li中有testitem样式的元素

        remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点重新添加到其它节点下。

        ②empty()  将节点内容清空

  • 相关阅读:
    JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
    jquery插件 源码
    webkit浏览器渲染影响因素分析
    JS操作JSON总结
    转:ie6与firefox操作iframe中DOM节点的一点不同
    input:focus
    JS设计模式一:单例模式
    JavaScript 变量、函数与原型链
    让你提前认识软件开发(49):自己主动測试
    Docker 开源管理工具集锦
  • 原文地址:https://www.cnblogs.com/fanqisoft/p/10692605.html
Copyright © 2011-2022 走看看