jQuery笔记---选择器

查找API，jQuery选择器，定位标签

1.基本选择器

id定位标签
class属性定位标签
标签名定位标签

2.举例

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><div id="div1ID">div1</div><div id="div2ID">div2</div><span class="myClass">span</span><p>p</p><script type="text/javascript">//1)查找ID为"div1ID"的元素个数
         $(“#divID”.size())//2)查找DIV元素的个数
         $(“div”).size();//3)查找所有样式是"myClass"的元素的个数
          $(“.myClass”).size();//4)查找所有DIV,SPAN,P元素的个数 ,多个属性定位的时候，可以使用逗号隔开3
          $(“div,span,p”).zize();//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数$(“#div,.class,p”)</script></body>
</html>
多个是可以使用，将他们隔开

2.层次选择器

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.8.2.js"></script></head><body><form><input type="text" value="a"/>        <table><tr><td><input type="checkbox" value="b"/></td></tr>            </table></form><input type="radio" value="c"/><input type="radio" value="d"/><input type="radio" value="e"/><script type="text/javascript">
     //1)找到表单form下所有的input元素的个数
      $(“form input”).size();//2)找到表单form下所有的子级input元素个数$(“form> input”).size();      第一个和第二个是区别：第一个是所有的input标签。第二个是form的子一代，子二代不包括在内。//3)找到表单form同级第一个input元素的value属性值$(“form+input ”).val();//4)找到所有与表单form同级的input元素个数       alert( $("form ~ input").size() ) </script>

  </body>
</html>

总结：form标签下的标签

$("form input"）.size();

form标签下子一代的标签

　　 $("form > input").size()

form标签的同一级的第一个标签

$("form +input"）

form标签同一级的标签

　　 $("form ~ input")

3.增强基本选择器

格式：$("ul li ：XX").text();

$(":header"),css("XX","XX").css("XX","XX")……当有很多的css样式的时候，可以使用一直，的方式向下添加。

//1)查找UL中第一个元素的内容
alert( $("ul li:first").text() );
//2)查找UL中最后个元素的内容
alert( $("ul li:last").text() );
//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
alert( $("table tr:odd").size() );
//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
alert( $("table tr:even").size() );
//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
alert( $("table tr td:eq(1)").text() );
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
alert( $("table tr:lt(2)").size() );
//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
$(":header").css("background-color","red").css("color","blue");
//3)查找所有未选中的input为checkbox的元素个数
alert( $(":checkbox:NOT(:checked)").size() );

5.内容选择器

//1)查找所有包含文本"John"的div元素的个数alert( $("div:contains('John')").size() );
//2)查找所有p元素为空的元素个数alert( $("p:empty").size() );
//3)给所有包含p元素的div元素添加一个myClass样式$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素alert( $("p:parent").size() );

7.使用jQuery的作用是，可以方便的操作web页面的标签和样式参数。

val()：获取标签的value属性值【假定有value属性】
html（）：获取标签之间的内容，不用于xml文件。
text():获取标签之间的内容，用于任何格式的参数（推荐）
css（）：使用key-value的方式，给标签添加样式。
addClass():加已经定义好的样式。
size（）获取到属性的个数。
length:获取对象和数组中的对象个数。

转载于:https://www.cnblogs.com/kw28188151/p/8296135.html

jQuery笔记---选择器相关推荐

jQuery笔记——选择器
jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性常规选择器根据id选择元素就是 ...
【jQuery笔记Part1】11-jQuery选择器
jQuery选择器基本选择器层级选择器属性选择器筛选选择器 siblings 案例 jQuery笔记目录基本选择器初始 html 页面: <!DOCTYPE html> < ...
jQuery笔记总结篇
首先,来了解一下jQuery学习的整体思路 jQuery系统学习篇 jQuery系统学习篇-XMind源文件提供参考下载 Jquery笔记 jQuery笔记总结-XMind源文件提供参考下载第一节 ...
java与jquery的选择器区别_JQuery选择器
原标题:JQuery选择器声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...
前端：jQuery笔记
前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
jQuery 笔记目录
jQuery笔记目录 part1 part2 part3 part4 Zepto.js 这是早期的笔记,当时写笔记还没有那么有规划,所以写的比较随意,每篇文章内容相对比较少,现在复习一下jQuery, ...
【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式本地集成远程集成 jQuery笔记目录 JS的问题? onload ...
尚硅谷 jQuery 笔记(张晓飞 2018)
title: 尚硅谷 jQuery 笔记 date: 2020-11-24 21:40:50 toc: true description: jQuery是JS的一个封装的库函数集,用于DOM的CRUD ...
jQuery笔记 - 基础
jQuery学习笔记-基础知识 01 初识jQuery 02 jQuery和JavaScript的固定写法 03 jQuery和JavaScript加载模式 04 jQuery 入口函数其它写法 05 ...

jQuery笔记---选择器

jQuery笔记---选择器相关推荐

最新文章

热门文章