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

 
分类: JavaScriptWeb
标签: JavaScriptWebjQuery

jQuery选取和操纵元素的特点的更多相关文章

  1. jQuery初探 jQuery选取和操纵元素的特点

    jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当 ...

  2. jQuery选取表单元素

    表单元素选择器 选择器                    说明 :button                 <button>元素和type属性值为button的<input& ...

  3. jquery slibings选取同级其他元素

    jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始. <script type="text/javascript"&g ...

  4. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  5. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  6. JavaScipt选取文档元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...

  7. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  8. jquery选择器控制Html元素

    1.JQuery中有addClass,removeClass,toggleClass addClass(class):为每个匹配的元素添加指定的类名 removeClass(class):从所有匹配的 ...

  9. Jquery取得iframe中元素的几种方法(转载)

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法:父窗口操作IFRAME:window.frames["iframeSon ...

随机推荐

  1. zepto.js 源码注释备份

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  2. php脚本生成google play url的下载链接,下载apk并自动反编译后获取android版本号

        需求:     get the offer tracking link    follow the redirect to get google play url    Go to http: ...

  3. Struts1项目转成Struts2项目步奏

    注意:要转成Struts2必须struts2配置和流程理解,我不知道,我只能说还是知道struts2然后转成struts2对. 1.先备份一份.不要没转成功项目搞蹦了都回不来了. 2.导入Struts ...

  4. 【Java编码准则】の #02不要在client存储未加密的敏感信息

    当构建CS模式的应用程序时,在client側存储敏感信息(比如用户私要信息)可能导致非授权的信息泄漏. 对于Web应用程序来说,最常见的泄漏问题是在client使用cookies存放server端获取 ...

  5. libsvm工具箱C++编程实践2

    转载请注明出处  http://blog.csdn.net/u013491262/article/details/37344193   点击打开链接 上周因为皮肤有点过敏,去医院来来回回一周. 前几天 ...

  6. BZOJ 1823 JSOI 2010 盛宴 2-SAT

    标题效果:有着n材料的种类,m陪审团. 每种材料具有两种不同的方法.每个法官都有两个标准.做出来的每一个法官的菜必须至少满足一个需求. 问:是否有这样一个程序. 思考:2-SAT经典的内置图形问题.因 ...

  7. “jquery于each方法和选择”学习笔记

    <head> <title></title> <script src="jquery-1.4.2.js" type="text/ ...

  8. 记录我第一次在Android开发图像处理算法的经历

    大概是四月底的时候.有人加我QQ问我是否做能做一些基于图像皮肤检測的算法, 主要是实现对皮肤六项指标: 1.      水分 2.      有份 3.      痤疮与痘痘 4.      色斑与肤 ...

  9. Linux 2.6 完全公平调度算法CFS(Completely Fair Scheduler) 分析

    转会http://www.ibm.com/developerworks/cn/linux/l-completely-fair-scheduler/index.html? ca=drs-cn-0125 ...

  10. .net下几种常用的对称加解密

    加密解密算法,太常用了,可是实在忍受不了十次八次之后还是要重头写,总是能告诉我原来的算法不好用(实际是压根不会用)的情况,不如直接写出来,再有人要直接给他看看,也顺便记录下算法,方便下新手大众. DE ...