jQuery选取和操纵元素的特点
jQuery选取和操纵元素的特点
JavaScript选取元素
先来看看不用jQuery的时候我们是怎么处理元素选取的.
JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候,结果为null,并且console会报脚本执行错误.
所以一般的做法是先用一个if判断该元素存在.
比如:
<body>
<a>click me</a>
<script type="text/javascript"> // document.getElementById("someId").style.color = "red";//if id does not exist,report error in console. if (document.getElementById("hello")) {//ensure it's neither null nor undefined.
document.getElementById("hello").style.color = "red";
}
</script> </body>
jQuery选取操纵元素
jQuery获取元素用的是$()运算符,比如获取某个id的对象用:$(“#idValue”).
不论该id的元素存在与否,都会返回一个jQuery对象(object).
这一点和直接用JavaScript获取DOM对象是完全不一样的.
一般情况下$()获取的是所有满足条件的元素,即得到的这个jQuery对象有一个属性length,表示元素的个数,可能为0,表示没有获取到元素.比如当要获取的目标id不存在时,该值为0.
id选择器是一个比较特殊的选择器,它只获取满足指定id的单个元素.如果id有多个,只返回第一个元素.
如果id不存在时,虽然可以获取jQuery对象,但是将jQuery对象转换为DOM对象(用[0]或者get(0)),将会得到一个undifined.
之后对这个DOM对象的任何属性操作都会报错,因为undefined不存在任何属性.
//jQuery
alert($("#hello"));//object //method1: convert jQuery object to DOM object
alert($("#hello")[0]);//undefined
$("#hello")[0].style.color = "red";//report error here!
既然转换成DOM元素不太好用,那么我们就放弃转换,直接操纵jQuery元素.
比如:
$("#hello").css("color","red");
这样,虽然对应id的元素还是不存在,样式修改也没有生效,但是页面不会报任何错误,因为jQuery会将其忽略掉.
如果id存在,则该样式会生效.
jQuery对象中的大多数方法同时支持读操作和写操作.
下面我们给链接加上我们想要的id.
<body>
<a id="hello">click me</a>
<script type="text/javascript">
//jQuery
alert($("#hello").length);//show DOM elements count.
$("#hello").css("color","red");//write action
alert($("#hello").css("color"));//read action
</script>
</body>
这个例子中hello是一个存在的id,首先用jQuery对象的css()方法的写操作赋予它一个颜色值,后来用读操作读出这个颜色值,弹窗显示出来.
jQuery中的大多数方法都是用同一个名字,同时支持相对应的读操作和写操作.
一般读操作是一个参数,写操作是两个参数.
总结: jQuery语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作.
基础语法是:$(selector).action()
$符号定义 jQuery.
选择符(selector)“查询”和“查找” HTML 元素.
jQuery 的 action() 执行对元素的读写操作.
关于jQuery选择器的内容这里先不详细介绍.本文只用了其中的id选择器作示例.
参考资料
圣思园张龙老师JavaWeb视频教程66.
HTML参考手册:http://www.w3school.com.cn/tags/index.asp
jQuery语法:http://www.w3school.com.cn/jquery/jquery_syntax.asp
jQuery选取和操纵元素的特点的更多相关文章
- jQuery初探 jQuery选取和操纵元素的特点
jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...
- jQuery选取表单元素
表单元素选择器 选择器 说明 :button <button>元素和type属性值为button的<input& ...
- jquery slibings选取同级其他元素
jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- JavaScipt选取文档元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- jquery选择器控制Html元素
1.JQuery中有addClass,removeClass,toggleClass addClass(class):为每个匹配的元素添加指定的类名 removeClass(class):从所有匹配的 ...
- Jquery取得iframe中元素的几种方法(转载)
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...
随机推荐
- mapxtreme C# 完美车辆动态轨迹展示
演示程序请在 http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找 Trajectory.rar 轨迹回放功 ...
- 对于超大型SQL SERVER数据库执行DBCC操作
原文:对于超大型SQL SERVER数据库执行DBCC操作 对于数据库维护,主要使用DBCC CHECKDB来实现,以下是对大型数据库的使用说明,小型数据库一般直接使用就可以了: 1.2008(200 ...
- css3 menu 手机菜单1
首先看一下效果图; 效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己 ...
- Qt Mac 在软件 icns图标制作
1.首先,下载一个电话Icon Composer软件 之前Xcode像这个东西,现在,我不知道有或无,迷茫,一世Xcode很少. Icon Composer是苹果出的. 下载地址: http://ww ...
- BI—脚不一样的感觉
在这个网络智能的时代,假设生活和智能挂不上边那就太落后啦!尤其IT行业更是如此,前不久还在用微软的office做报表,这几天就吵吵着换成BI,那么BI是什么?有什么用?怎么用?等等带着这一系列的问题来 ...
- oracle数据库全然恢复和不全然恢复以及运行用户管理辈分恢复
比較全然恢复和不全然恢复: 一.全然恢复:将数据库恢复到当前最新状态,包含直至请求恢复时进行的全部已提交的数据更改 二.不全然恢复:将数据库恢复到请求恢复操作之前指定的过去时间点 一.全然恢复过程 以 ...
- [Django1.6]The MEDIA_ROOT and STATIC_ROOT settings must different 解决
该项目有一个图片上传功能,为了把上传路径很简单,写在同一个静态文件路径,于wi7执行机器上没问题,今centos我们报道了机上,如下面的错误: django.core.exceptions.Impro ...
- 介绍 Microservice
介绍 Microservice 这篇文章转自我的 Github blog 一天我司招财猫姐(HR 大人)问我,你给我解释一下 Microservice 是什么吧.故成此文.一切都是从一个创业公司开始的 ...
- java.lang.IllegalStateException: You need to use a Theme.AppCompat theme
配置: 中设置theme为 <application android:allowBackup="true" android:icon="@mipmap/ic_lau ...
- (大数据工程师学习路径)第三步 Git Community Book----基本用法(下)
一.比较提交 - Git Diff 1.比较提交 - Git Diff 你可以用 git diff 来比较项目中任意两个版本的差异. $ git diff master..test 上面这条命令只显示 ...