jQuery初探 jQuery选取和操纵元素的特点
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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2014-01-06 Source Insight基本使用和快捷键