jQuery 选择器与节点操作

jQuery 是一个 JavaScript 函数库。jQuery 的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创建动画效果、处理事件、以及开发 Ajax 程序。jQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。

jQuery 获取元素

元素选择器

// 元素选择器 <div >
$("div")

id 选择器

//id 选择器 <div id='id'>
$("#id") $("div#id")

class 选择器

//class 选择器 <div class='class'>
$(".class") $("div.class")

属性过滤选择器

<li class='check' type='li_01'></li>
<li type='li_02'></li>
<li type='li_03'></li>
// 通过属性获取 如果属性值为有特殊字符,一定要加引号
$("[type]")                  // 获取有 type 属性的元素
$("[type='li_01']")          // 获取 type 值等于 'li_01' 的元素
$("[type!='li_01']")         // 获取 type 值不等于 'li_01' 的元素
$("[type*='li']")            // 模糊匹配 获取 type 值包含 'li' 的元素
$("[type^='li']")            // 模糊匹配 获取 type 值以 'li' 开始的元素
$("[type$='01']")            // 模糊匹配 获取 type 值以 '01' 结尾的元素
$("li [class='check'][type]") // 获取多个条件同时满足的元素

* 选择器

// 遍历 form 下的所有元素,将其 margin 设置 0
$('form *').css ('margin','0px')

并列选择器

$('p, div').css ('color','red'); // 将 p 元素和 div 元素的字体颜色设置为 red

层叠选择器

<div class='a'>                  <!-- 父级 div -->
    <div class='a1'>             <!-- 子级 div1 -->
        <div class='a11'></div>  <!-- 孙级 div1 -->
    </div>   
    <div class='a2'></div>       <!-- 子级 div2 -->
    <div class='a3'></div>       <!-- 子级 div3 -->
    <span></span>                <!-- 子级 span1 -->
</div>
$(".a div")       // 选择 class=a 的元素下所有的 div 即选择到子级 div1,2,3 孙级 div1
$(".a > div")     // 选择 class=a 的元素的所有子 div 元素,即选择到子级 div1,2,3;
$("div + span")   // 选择所有的 div 元素的下一个 input 元素节点,即选择到:子级 div3
$(".a1 ~ div")    // 同胞选择器,返回 class 为 a2 的标签元素的所有属于同一个父元素的 div 标签,即 div1,2,3

基本过滤选择器

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
$("li:first")     // 选择所有 li 元素的第一个
$("li:last")      // 选择所有 li 元素的最后一个
$("li:even")      // 选择所有 li 元素的第 0,2,4... ... 个元素 (序号从 0 开始)
$("li:odd")       // 选择所有 li 元素的第 1,3,5... ... 个元素
$("li:eq (2)")     // 选择所有 li 元素中的第三个 (即序号为 2)
$("li:gt (3)")     // 选择所有 li 元素中序号大于 3 的 li 元素
$("li:ll (2)")     // 选择所有 li 元素中序号小于 2 的 li 元素
<input type="checkbox" />
<input type="checkbox" />
$("input [type='checkbox']:checked")        // 获取所有已被选中的 type 等于 checkbox 的 input 元素
$("input [type='checkbox']:not (:checked)")  // 获取所有未被选中的 type 等于 checkbox 的 input 元素

内容过滤器

$("div:contains ('Faker')")     // 选择所有 div 中含有 Faker 文本的元素
$("div:empty")                 // 选择所有 div 中为空 (不包含任何元素 / 文本) 的元素
$("div:has ('p')")              // 选择所有 div 中包含 p 元素的元素
$("div:parent")                // 选择所有的含有子元素或文本的 div

可视化过滤器

$("div:hidden")            // 选择所有被 hidden 的 div 元素
$("div:not (:hidden)")      // 选择所有没有被 hidden 的 div 元素
$("div:visible")           // 所有可视化的 div 元素
$("div:not (:visible)")     // 所有非可视化的 div 元素

子元素过滤器

<body>
    <div class='d1'>
        <div class='d11'>
            <div class='d111'>
            </div>
        </div>
    </div>
</body>
$("body div:first-child")  // 返回所有的 body 元素下 所有 div 为父元素的第一个元素 的元素.
//:first 与 :first-child 的区别用法
//$("body div:first") 只匹配到第一个合适的元素 即只匹配到 d1
//$("body div:first-child") 匹配所有合适的元素:d1 是 body 的第一个元素,d11 是 d1 的第一个元素..
// 所以匹配到 d1,d11,d111
$("div span:last-child")   // 返回所有的 body 元素下 所有 div 为父元素的最后一个元素 的元素.
//:last 与 :last-child 的区别参考 first
$("div button:only-child") // 如果 button 是它父级元素的唯一子元素,此 button 将会被匹配

表单元素选择器

$(":input")    // 选择所有的表单输入元素,包括 input, textarea, select 和 button
$(":text")     // 选择所有的 text input 元素
$(":password") // 选择所有的 password input 元素
$(":radio")    // 选择所有的 radio input 元素
$(":checkbox") // 选择所有的 checkbox input 元素
$(":submit")   // 选择所有的 submit input 元素
$(":image")    // 选择所有的 image input 元素
$(":reset")    // 选择所有的 reset input 元素
$(":button")   // 选择所有的 button input 元素
$(":file")     // 选择所有的 file input 元素
$(":hidden")   // 选择所有类型为 hidden 的 input 元素或表单的隐藏域

表单元素过滤器

$(":enabled")               // 选择所有的可操作的表单元素
$(":disabled")              // 选择所有的不可操作的表单元素
$(":checked")               // 选择所有的被 checked 的表单元素
$("select option:selected") // 选择所有的 select 的子元素中被 selected 的元素

节点操作

获取和操作节点属性

<a href='index.html' data-type='a' style="color:red;">index</a>
<input value='user' />
$("a").attr ("href");               // 获取 href 属性值
$("a").attr ("href","about.html");  // 设置 href 属性值

$("a").data ("type");               // 获取 data-type 属性值

$("a").css ("color");               // 通过 key (color/display/....) 获取 css 值
$("a").css ("color","black");       // 通过 key/value 设置 css 属性

$("a").text ();                     // 获取 a 的文本节点值
$("a").text ("Index.html");         // 设置 a 的文本节点值

$("input").val ();                  // 获取 input 的 value 值
$("input").val ("username");        // 设置 input 的 value 值

插入节点的方法

<div class="head">
    <span>Faker<span>
</div>
$(".head").append ("<span>hello</span>")  // 在.head 中的最后插入一段 html
// 结果: <div class="head"><span>Faker</span><span>hello</span></div>

$("<span>hello</span>").appendTo (".head") // 在.head 中的最后插入一段 html,
// 结果: <div class="head"><span>Faker</span><span>hello</span></div>

$(".head").prepend ("<span>hello</span>")  // 在.head 中的开始插入一段 html,
// 结果: <div class="head"><span>hello</span><span>Faker</span></div>

$("<span>hello</span>").prependTo (".head")  // 在.head 中的开始插入一段 html,
// 结果: <div class="head"><span>hello</span><span>Faker</span></div>

$(".head *:first").after ("<span>hello</span>")  // 在.head 中的第一个元素后插入一段 html,
// 结果: <div class="head"><span>Faker</span><span>hello</span></div>

$("<span>hello</span>").insertAfter (".head *:first")  // 在.head 中的第一个元素后插入一段 html,
// 结果: <div class="head"><span>Faker</span><span>hello</span></div>

$(".head *:first").before ("<span>hello</span>")  // 在.head 中的第一个元素前插入一段 html,
// 结果: <div class="head"><span>hello</span><span>Faker</span></div>

$("<span>hello</span>").insertBefore (".head *:first")  // 在.head 中的第一个元素后插入一段 html,
// 结果: <div class="head"><span>hello</span><span>Faker</span></div>

$.load () 方法

在指定位置加载请求回来的 html 页面

<div class="head">

</div>
$(".head").load (url [,data][,callback])
url:           请求 HTML 页面的 URL 地址
data (可选):     请求的 key/value 参数
callback (可选)  请求完成的回调函数

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏