一、通过id选择器获取并操作元素--------$("#id属性的值")

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. //根据id选择器获取按钮,添加点击事件,修改按钮的value属性值
  5. $("#btn").click(function(){
  6. $(this).val("已经点击");
  7. });
  8. });
  9. //注意:val()是jQuery中获取或者设置表单value属性值的方法
  10. //jQuery对象.val()------获取属性值
  11. //jQuery对象.val("值")------设置属性值
  12. </script>
  13. <input type="button" value="点击" id="btn">

二、通过标签选择器获取并操作元素--------$("标签名字")

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#btn").click(function(){
  5. $("p").text("我们都是P")
  6. });
  7. });
  8. //注意:
  9. //1.jQuery对象.text()方法相当于DOM中的.innerText属性
  10. //2.对象.text()-------获取该元素的文本内容
  11. //3.对象.text("值")----设置该元素的文本内容
  12. //4.在本例中,获取的p标签之后直接设置值,而不是像DOM操作一样,需要循环遍历,
  13. //因为jQuery内部已经帮助我们进行了循环操作------->隐式迭代
  14. </script>
  15. <input type="button" value="点击" id="btn">
  16. <p id="p1">第一个P</p>
  17. <p id="p2">第二个P</p>
  18. <p id="p3">第三个P</p>
  19. <p id="p4">第四个P</p>
  20. </body>

三、通过类选择器获取并操作元素--------$(".class属性的值")

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#btn").click(function(){
  5. $(".cls").css("border","2px solid red");
  6. $(".cls").css("backgroundColor","yellow");
  7. });
  8. });
  9. //注意:
  10. //对象.css("属性","值")------设置某个元素的css样式属性值
  11. //多个属性值写法:对象.css("属性1":"值","属性2":"值",....)
  12. </script>
  13. <input type="button" value="点击" id="btn">
  14. <div class="cls">我是一个div</div>
  15. <p class="cls">我是一个p</p>

四、通过交集选择器获取并操作元素--------$("标签+类选择器")

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#btn").click(function(){
  5. $("p.p1").css("background","yellow");
  6. });
  7. });
  8. </script>
  9. <input type="button" value="点击" id="btn">
  10. <p class="p1">有类选择器的p</p>
  11. <p>没有类选择器的p</p>

五、通过并集选择器获取并操作元素--------$("选择器1,选择器2,.....")

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#btn").click(function(){
  5. $("#dv,.p1,span").css("background","yellow");
  6. });
  7. });
  8. </script>
  9. <input type="button" value="点击" id="btn">
  10. <div id="dv">一个div</div>
  11. <p class="p1">一个p</p>
  12. <span>一个span</span>
  13. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  14. <script>
  15. $(function(){
  16. $("#btn").click(function(){
  17. $("#dv,.p1,span").css("background","yellow");
  18. });
  19. });
  20. </script>
  21. <input type="button" value="点击" id="btn">
  22. <div id="dv">一个div</div>
  23. <p class="p1">一个p</p>
  24. <span>一个span</span>

六、通过层次选择器获取并操作元素

  • 后代选择器-----------------空格

  • 子代选择器----------------- >

  • 兄弟选择器----------------- ~

  • 直接兄弟选择器----------- +

  1. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $("#btn").click(function(){
  5. //后代
  6. $("#dv span").css("background","yellow");
  7. //子代
  8. $("#dv>span").css("background","red");
  9. //兄弟
  10. $("#dv~span").css("background","blue");
  11. //直接兄弟
  12. $("#dv+span").css("background","white");
  13. });
  14. });
  15. </script>
  16. <input type="button" value="点击" id="btn">
  17. <div id="dv">
  18. <p>
  19. <span>div的后代span</span>
  20. </p>
  21. <span>dv的子代span</span>
  22. </div>
  23. <span>dv的直接兄弟span</span>
  24. <span>dv的兄弟span</span>

七、基本筛选选择器

  • :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
  • gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

八、内容筛选选择器

  • :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  • 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的
  • :parent与:empty是相反的,两者所涉及的子元素,包括文本节点

九、可见性筛选选择器

  • :hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等
  • 我们有几种方式可以隐藏一个元素:CSS display的值是none;type="hidden"的表单元素;宽度和高度都显式设置为0;一个祖先元素是隐藏的,该元素是不会在页面上显示;CSS visibility的值是hidden;CSS opacity的指是0
  • 如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局

十、属性筛选选择器

  • [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
  • [name!="value"]  属于jQuery 扩展的选择器

十一、元素筛选选择器

  • :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  • :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
  • 如果子元素只有一个的话,:first-child与:last-child是同一个
  • :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
  • jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
  • nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

十二、表单元素选择器

除了input筛选选择器,几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

十三、表单对象属性筛选选择器

  • 选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
  • 在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素

十四、特殊选择器this

  1. this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
  1. <body>
  2. <h2>特殊选择器this</h2>
  3.  
  4. <p id="test1">点击测试:通过原生DOM处理</p>
  5.  
  6. <p id="test2">点击测试:通过原生jQuery处理</p>
  7.  
  8. <script type="text/javascript">
  9. var p1 = document.getElementById('test1')
  10. p1.addEventListener('click',function(){
  11. //直接通过dom的方法改变颜色
  12. this.style.color = "red";
  13. },false);
  14. </script>
  15.  
  16. <script type="text/javascript">
  17. $('#test2').click(function(){
  18. //通过包装成jQuery对象改变颜色
  19. $(this).css('color','blue');
  20. })
  21. </script>
  22.  
  23. </body>

jQuery获取元素的方式的更多相关文章

  1. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  2. JQuery获取元素的方法总结

    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...

  3. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  4. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  5. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

  6. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  7. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  8. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  9. Jquery获取元素方法

    Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以 ...

随机推荐

  1. WUSTOJ 1311: 开心的金明(Java)动态规划-01背包

    题目链接:

  2. SAS学习笔记52 Excel导入后日期错乱

    读入Excel数据到SAS中,很小概率会遇到日期格式错乱,如:将Excel中的日期导入到SAS后就变成一个字符型的数字 在SAS中换算一下就可以更正

  3. WxWidgets与其他工具包的比较(15种方案)

    一些一般注意事项: wxWidgets不仅适用于C ++,而且具有python,perl,php,java,lua,lisp,erlang,eiffel,C#(.NET),BASIC,ruby甚至ja ...

  4. tslint 忽略格式检查

    // tslint:disable——忽略该行以下所有代码出现的错误提示,可以在文件首行添加达到忽略整个文件的格式提示 // tslint:enable——当前ts文件重新启用tslint// tsl ...

  5. kvm第二章--虚拟机管理

  6. iOS - Scenekit3D引擎初探之 - 导出DAE文件(3Dmax为例)

    DAE文件格式是3D交互文件格式,一般用于多个图形程序之间交换数字数据,Autodesk专有并在COLLADA(COLLAborative Design Activity)基础上改进创建的XML框架的 ...

  7. js同时获取多个共同class内容标签内容集合

    1.获取标签内容  标签如下:   <img image-code="#qq_1_gif#" class="emoji_icon" src="i ...

  8. Fortify漏洞之Access Control: Database(数据越权)

    继续对Fortify的漏洞进行总结,本篇主要针对 Access Control: Database(数据越权)的漏洞进行总结,如下: 1.Access Control: Database(数据越权) ...

  9. 虹软人脸识别 - faceId及IR活体检测的更新介绍

    虹软人脸识别 - faceId及IR活体检测的介绍 前几天虹软推出了 Android ArcFace 2.2版本的SDK,相比于2.1版本,2.2版本中的变化如下: VIDEO模式新增faceId(类 ...

  10. LInux设置tomcat端口为80

    <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" ...