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选择器作示例.

时间: 2024-11-03 20:47:37

jquery(二) jQuery选取和操作元素的特点的相关文章

[ jquery 选择器 :nth-child ] 选取匹配其父元素下的第N个子或奇偶元素

选取匹配其父元素下的第N个子或奇偶元素: 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,key

恶补jquery(二)jquery常用选择器

jquery选择器与js获取页面元素比较 我们以简单的例子说明,其中div的id为divT,如下所示 用js在div中内容输出代码如下: window.onload=function(){ var myDiv = document.getElementById("divT"); myDiv.innerHTML = "这是个测试页面"; } 用jquery选择div元素然后输出,代码如下: $(function(){ $("#divT").html

jQuery(二) jQuery对Ajax的使用

学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代码进行对比,才会有所悟. 1.1.什么是Ajax?(顺带提一下) 全名:Asynchronous Javascript And Xml[异步javascript和xml], 同步和异步原理图 同步就是浏览器发送一个请求到服务器端,网址会改变,页面会被重新加载到新的页面.如图 异步就是浏览器发送一个请

JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setInterval()用来实现一个在指定毫毛数的时间里重复调用,返回一个值,这               个值可以传递给clearInterval()用于取消后续函数的调用. ③Document对象的location属性也引用到Location对象: window.location === docume

11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的,也要在其它引入的jquery文件上面--> 2.写jquery代码的位置 和js一样,jquery代码也是写在<script>开始和结束标签之间. <script type="text/javasc

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

Day 55(08/15)jquery 操作元素(属性,css,文档处理)

四 操作元素(属性,css,文档处理) 4.1 事件 页面载入 1 2 ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> $(function(){}) 事件绑定 //语法: 标签对象.事件(函数) eg: $("p").click(function(){}) 事件委派: $("").on(eve,[selector],[data],fn

jQuery操作元素方法总结

总结工作中常用到的jQuery操作元素的各种方法,方便以后查阅使用. jquery判断checkbox是否被选中 if($("#id").is(":checked")) jquery获取选中的radio var gender = $("input[name='gender']:checked").val(); jquery选中radio $("input:radio[name='gender'][value='M']").at