文档章节

jQuery 练习[二]: 获取对象(1) - 基本选择与层级

涂孟超
 涂孟超
发布于 2014/09/26 15:36
字数 634
阅读 11
收藏 0

根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")
<div id="div1">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>

根据标签选择, 如: $("span")
<div><span>AAA</span></div>
<div>BBB</div>
<span>CCC</span>

根据样式的类名选择, 如: $(".class1")
<div class="class1">AAA</div>
<div class="class2">BBB</div>
<div class="class1">CCC</div>

选择所有对象是: $("*")

可混合使用, 如: $("#btn2, .class1, span") [ 复制代码] &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;script src=&quot;http://code.jquery.com/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span1&lt;/span&gt; &lt;div&gt; &lt;button id=&quot;btn1&quot;&gt;button1&lt;/button&gt;&lt;br/&gt; &lt;button id=&quot;btn2&quot;&gt;button2&lt;/button&gt;&lt;br/&gt; &lt;/div&gt; &lt;div&gt; &lt;label class=&quot;class1&quot;&gt;label1&lt;/label&gt;&lt;br/&gt; &lt;label class=&quot;class2&quot;&gt;label2&lt;/label&gt;&lt;br/&gt; &lt;/div&gt; &lt;span&gt;span2&lt;/span&gt; &lt;/body&gt; &lt;/html&gt; &lt;script&gt; //修改选择对象的 color 样式为 red $(&quot;#btn2, .class1, span&quot;).css(&quot;color&quot;, &quot;red&quot;); &lt;/script&gt;


可分层选择, 如: $(".class1 div label")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

如: $(".class1 span") 或 $(".class1").find("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"> <span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

只从子层中选择, 如: $(".class1 > span"); 如果没有中间的 > 会选择其下的所有符合条件的子孙对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

混合使用, 如: $("#id3 label, #id3 ~ span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"> <label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他元素, 如: $("#id2").siblings()
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>

选择同一层级的其他 span, 如: $("#id2").siblings("span")
<div class="class1">
    <div id="id1">111</div>
    <div id="id2"><span>222</span></div>
    <div id="id3"><label>333</label></div>
    <span>444</span><br/>
    <span>555</span>
</div>



本文转载自:http://www.cnblogs.com/del/archive/2010/05/27/1745683.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
08/03
0
0
Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵
06/21
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
07/31
0
0
jQuery学习笔记之JavaScript脚本库和元素选择器研究[图]

jQuery学习笔记之JavaScript脚本库和元素选择器研究[图] jQuery是一套JavaScript脚本库,相当于Java的类库,将一些工具方法或者对象方法封装在类库中,方便用户使用。 工厂函数指的是这些内建...

原创小博客
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

简易审计系统

1、有时候我们需要对线上用户的操作进行记录,可以进行追踪,出现问题追究责任,但是linux自带的history并不会实时的记录(仅仅在内存中,当用户正常退出(exit logout )时才会记录到history文件里...

芬野de博客
23分钟前
1
0
Qt那些事0.0.6

QML中使用Image,在设置source的后,通过Qt Quick2 Preview(qmlscene)遇到了图片找不到的问题: Image { id: success_img anchors.centerIn: parent ...

Ev4n
24分钟前
2
0
白话SpringCloud | 第十一章:路由网关(Zuul):利用swagger2聚合API文档

前言 通过之前的两篇文章,可以简单的搭建一个路由网关了。而我们知道,现在都奉行前后端分离开发,前后端开发的沟通成本就增加了,所以一般上我们都是通过swagger进行api文档生成的。现在由...

oKong
30分钟前
2
0
javah 生成jni文件的问题

命令:(on macbook for android) javah -d src/main/jni -jni -classpath /Users/Carlyle_Pro/Documents/android_adt/sdk/platforms/android-25/android.jar:build/intermediates/classes/......

Carlyle_Lee
32分钟前
1
0
Ubuntu 安装ssh服务以及开启root用户ssh登录

一、安装ssh服务 安装ssh服务 sudo apt-get update sudo apt-get install openssh-server 安装完成后启动ssh服务 sudo service ssh start 二、开启root用户ssh登录 解决root远程ssh不能登录,...

15834278076
52分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部