jquery选择器需要注意的地方总结

  • 时间:
  • 3009人关注

本文讲述的是jquery选择器结果是数组时需要主要的一个问题,并详细分析了产生此问题的原因,这里记录下来,小伙伴们在项目中使用的时候要注意一下。,另外这篇文章主要知识点是关于jquery、选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:
  • 编辑整理:游俊豪
  • 教程字数:603字节
  • 阅读时间:大概18分钟
  • 下载本教程(DOC版)
  • 《从0到1:jQuery快速上手》课件,源码,习题答案
  • 選色器
  • SelectorGadget
  • Web前端开发技术(jQuery+Ajax 慕课版)
  • jQuery 前端开发实战
  • 我们先来看段代码,很简单,如下

     

     

    <div id="div1">
        <span>111</span>
        <span>222</span>
        <span>333</span>
        <button id="button1">clear</button>
    </div>

     

     

     

    $(function() {
         $("#button1").click(function() {
             $("#div1 span").html("aaa");
         });
     });

     

    $("#div1 span")获得三个对象的数组

    1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图

    jquery选择器需要注意的问题

    2.如果执行$("#div1 span").html(),只取值的话,则只会取数组第一个对象的值

    jquery选择器需要注意的问题

    所以如果选择器获得是一个数组,要对数组每个元素都进行操作时,最好用each().

    另外还有些注意事项

    选择器中含有特殊符号的注意事项选择器中含有“.”、“#”、“(”或“]”等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出来的话就会出错。

    解决此类错误的方法是使用转义符转义。
    <div id="id#b">bb</div>
    <div id="id[1]">cc</div>

    不能这样写:
    $('#id#b');  $('#id[1]');
    应该使用转义符号:
    $('#id\\#b');       //转义特殊字符“#”
    $('#id\\[1\\]');    //转义特殊字符“[ ]”


    上一篇:解析jquery中使用$(#form).submit()重写提交表单无效原因

    下一篇:jquery自定义button按钮的方法总结

    相关内容

    • 如何解决jquery的flexigrid无法显示数据提示获取到数据问题

      升级了IE10,发现flexigrid无法显示数据,提示获取到了数据,但没任何报错任何显示,经过试验和跟踪,修改如下,有类似问题的朋友可以参考下哈

      04-19jquery的flexigrid无法显示数据提示获取到数据

      阅读更多
    • Jquery瀑布流插件的技巧用法

      瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西

      01-23Jquery瀑布流插件使用介绍

      阅读更多
    • 实例分享提取jquery的ready()方法

      有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了

      02-26提取jquery的ready()方法单独使用示例

      阅读更多
    • 详解jQuery .attr()和.removeAttr()方法操作元素属性

      本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性,不会的朋友可以参考下哈,希望对大家有所帮助

      01-27jQuery .attr()和.removeAttr()方法操作元素属性示例

      阅读更多
    • jquery操作checked属性以及disabled属性的方法整理

      这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下

      06-15jquery操作checked属性以及disabled属性的多种方法

      阅读更多
    • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

      大小:167.1 MB前端开发

      点击下载
    • PHP与jQuery开发实例

      PHP与jQuery开发实例

      这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

      大小:9.8 MBPHP开发

      点击下载
    • jQuery api 3.3.1中文手册

      jQuery api 3.3.1中文手册

      jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表,很实用的手册,在编写jQuery查看很实用,其内包含了jquery学习过程中的各类知识点,能够让你清楚地了解每一个函数的核心内容,属性以及css框架信息,从而更好的实现编程。需要的朋友可下载试试! 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上,或者是鼠标右击文件,选择ldquo;属性rdquo;,点击ldquo;取消限制rdquo;即

      大小:1.58 MBjQuery

      点击下载
    • jQuery实战从入门到精通

      jQuery实战从入门到精通

      本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

      大小:189.1 MBjQuery

      点击下载
    • JavaScript和jQuery实战手册

      JavaScript和jQuery实战手册

      JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

      大小:103 MBJavaScript

      点击下载
    • Bootstrap与jQuery UI框架设计

      Bootstrap与jQuery UI框架设计

      随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

      大小:180 MBjQuery

      点击下载
    • 锋利的jQuery

      锋利的jQuery

      《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

      大小:194.9 MBjQuery

      点击下载

    学习笔记

    3小时29分钟前回答

    jQuery选择器选中最后一个元素,倒数第二个元素操作示例

    本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作。分享给大家供大家参考,具体如下: HTML部分: div p元素1/p p元素2/p p元素3/p p元素4/p p元素5/p/div 取倒数第二个p元素 $("div p").eq(-2) 取最后一个p元素 $("div p").last() 完整测试示例代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.jb51.net jQuery选择器/titlestyle.red{color:#FF0000;}.blue{color:#0000FF;}/style/headbodyscript src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/scriptscript type="text/javascript"$(document).ready(function(){$("div……

    46小时54分钟前回答

    jQuery中:empty选择器用法实例

    本文实例讲述了jQuery中empty选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配所有不包含子元素或者文本的空元素。 注意: 空格也属于选择器包含的元素。 语法结构: $(":empty") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等 。例如: $("li:empty").animate({width:"200px"}) 以上代码能够将li元素集合中的空li元素的宽度以自定义动画的方式设置为200px。 实例代码: 实例一: !DOCTYPE html html head meta charset=" utf-8" meta name="author" content="//www.jb51.net/" / title码农之家/title style type="text/css" li { list-style-type:none; width:150px; height:30px; border:1px solid red; } .run{background-color:green;} .static{background……