jquery的选择器

基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

案例代码：

<html>

    <head>

       <meta charset="UTF-8">

       <title>基本选择器</title>

       <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("#one").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $(".mini").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("div").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("*").css("background-color","pink");

              });

              $("#btn5").click(function(){

                  $("#two .mini").css("background-color","pink");

              });

           });

       </script>    

    </head>

    <body>

       <input type="button" id="btn1" value="选择为one的元素"/>

       <input type="button" id="btn2" value="选择样式为mini的元素"/>

       <input type="button" id="btn3" value="选择所有的div元素"/>

       <input type="button" id="btn4" value="选择所有元素"/>

       <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

       <span id="four">

       </span>

    </body>

</html>
层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

代码演示：

<html>

    <head>

       <meta charset="UTF-8">

       <title>层级选择器</title>

       <link rel="stylesheet" href="../../css/style.css" />

       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("body div").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("body>div").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("#two+div").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("#one~div").css("background-color","pink");

              });

           });

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="选择body中的所有的div元素"/>

       <input type="button" id="btn2" value="选择body中的第一级的孩子"/>

       <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

       <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

       <span id="four">

       </span>

    </body>

</html>

Ø  基本过滤选择器

$('li').first() 等价于：$(“li:first”)

代码案例演示：

<html>

    <head>

       <meta charset="UTF-8">

       <title>基本过滤选择器</title>

       <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("div:first").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("div:last").css("background-color","pink");

              });

              $("#btn3").click(function(){

                  $("div:odd").css("background-color","pink");

              });

              $("#btn4").click(function(){

                  $("div:even").css("background-color","pink");

              });

           });

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="body中的第一个div元素"/>

       <input type="button" id="btn2" value="body中的最后一个div元素"/>

       <input type="button" id="btn3" value="选择body中的奇数的div"/>

       <input type="button" id="btn4" value="选择body中的偶数的div"/>

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

       <span id="four">

       </span>

    </body>

</html>
Ø  属性选择器
<html>

    <head>

       <meta charset="UTF-8">

       <title>层级选择器</title>

       <link rel="stylesheet" href="../../css/style.css"  type="text/css"/>

       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $("div[id]").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $("div[id='two']").css("background-color","pink");

              });

           });

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="选择有id属性的div"/>

       <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

       <hr/>

       <div id="one">

           <div class="mini">

              111

           </div>

       </div>

       <div id="two">

           <div class="mini">

              222

           </div>

           <div class="mini">

              333

           </div>

       </div>

       <div id="three">

           <div class="mini">

              444

           </div>

           <div class="mini">

              555

           </div>

           <div class="mini">

              666

           </div>

       </div>

       <span id="four">

       </span>

    </body>

</html>

Ø  表单选择器

<html>

    <head>

       <meta charset="UTF-8">

       <title>表单选择器</title>

       <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

       <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

       <script>

           $(function(){

              $("#btn1").click(function(){

                  $(":input").css("background-color","pink");

              });

              $("#btn2").click(function(){

                  $(":text").css("background-color","pink");

              });

           });

       </script>

    </head>

    <body>

       <input type="button" id="btn1" value="选择所有input元素" />

       <input type="button" id="btn2" value="选择文本框" />

       <br/>

       <form>

           <input type="text[ThinkPad1] " /><br />

           <input type="checkbox" /><br />

           <input type="radio" /><br />

           <input type="image" /><br />

           <input type="file" /><br />

           <input type="submit" />

           <input type="reset" /><br />

           <input type="password" /><br />

           <input type="button" /><br />

           <select><option/></select><br />

           <textarea></textarea><br />

           <button></button>

       </form>

    </body>

</html>

jq基础（2）的更多相关文章

  1. jQuery源代码解析（1）—— jq基础、data缓存系统

    闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...

  2. JQ基础之选择器

    JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $ ...

  3. 网页JQ基础之jq-隐藏以及显示特效

    简单的 隐藏以及显示的 JQ 的代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/j ...

  4. JQ基础练习---图片划过变暗

    简单分享下,划过一张图片其余图片变暗,图片划过变暗的简单效果,JQ实现主要是css写法跟思路变化. <script src="http://ajax.googleapis.com/aj ...

  5. jq基础

    $(function() {          $(".dd").attr("class","cc").append("<h ...

  6. 《锋利的JQ》摘抄（一） jq基础篇

    前言:第一次写博客有点紧张233333,我会在博客里放一下在赌这本书过程中遇到的一些有用的知识点,希望等帮助到大家.好了正题开始(只要是我不知道该说啥了= =)  一,资源(在w3cfuns资源中可以 ...

  7. js/jq基础（日常整理记录）-1-纯js格式化时间

    一.纯js格式化时间 之前记录了一些,工作中发现的比较常用的使用,就记录一下. 由于很基础,就直接贴出来了,不做分析了. 改造一下Date的原型 Date.prototype.format = fun ...

  8. 陆、jq基础语法

    一.概述:更加方便的处理html文档.events事件.动画效果和ajax交互等. 1.jq主要功能: (1)访问页面框架的局部. (2)修改页面表现 (3)更改页面的内容 (4)响应事件 (5)为页 ...

  9. dom与jq基础使用

    js有两种运行环境,一个是浏览器,一个是服务器(NodeJS) js的本质是es,因为运行环境的不同,为了操作环境内的api做了升级 在浏览器上js分为es + dom + bom 在服务器上js又有 ...

  10. 【JQ基础】DOM操作

    内部插入:append() //向每个匹配的元素内部追加内容,可包含 HTML 标签 $(selector).append(function(index,html)) /*•index - 可选.接收 ...

随机推荐

  1. [lua]紫猫lua教程-命令宝典-L1-01-08. math数学函数库

    L1[math]01. 取绝对值 L1[math]02. 三角函数 小知识:注意 lua下三角函数用的参数是弧度 而不是角度 弧度=角度*pi/180  -->弧度角度换算公式  lua的mat ...

  2. 使用ResponseBodyAdvice统一包装响应返回String的时候出现java.lang.ClassCastException: com.xxx.dto.common.ResponseResult cannot be cast to java.lang.String

    代码如下: @Override public ResponseResult<Object> beforeBodyWrite(Object returnValue, MethodParame ...

  3. # E. Mahmoud and Ehab and the xor-MST dp/数学+找规律+xor

    E. Mahmoud and Ehab and the xor-MST dp/数学/找规律 题意 给出一个完全图的阶数n(1e18),点由0---n-1编号,边的权则为编号间的异或,问最小生成树是多少 ...

  4. SARS病毒

    每一道题目皆是一处美丽的风景: 何为科技的力量和程序的思维哦,在这暑假的编程之路上,我要好好地体验一番来嘞! 数学规律是:f(n)=2^(n-1)+4^(n-1).     //递推分析可得!具体过程 ...

  5. arcgis字段计算器

    arcgis字段计算器 一.VB脚本 1.取某字段前几位或者后几位 ) ) 2.合并字段,中间加符号 Dim a if [ZDDM2] ="" Then a= [ZDDM1] el ...

  6. Demo：基于 Flink SQL 构建流式应用

    Flink 1.10.0 于近期刚发布,释放了许多令人激动的新特性.尤其是 Flink SQL 模块,发展速度非常快,因此本文特意从实践的角度出发,带领大家一起探索使用 Flink SQL 如何快速构 ...

  7. mysql开启远程访问及相关权限控制

    开启mysql远程访问: 授予用户user 密码 passwd 所有权限 所有主机IP可访问 授权语句:Grant <权限> on 表名[(列名)] to 用户 With grant op ...

  8. 对于使用secureFX上传文件到centos7 的时候，以及不同的用户解压文件，对于文件操作权限的实验

    本以为以一个用户胡如root登录了SecureFx,之后选择了root的家目录下的一个software目录,之后上传 以root用户远程登录LINUX系统 查看文件 之后再验证普通用户zhaijh登录 ...

  9. Centos6.10-FastDFS-Storage.conf配置示例

    Centos610系列配置 # is this config file disabled # false for enabled # true for disabled disabled = fals ...

  10. 深入delphi编程理解之消息（四）使用TWMSysCommand结构体的WM_SysCommand消息应用

    通过以下实例拦截窗体WM_SysCommand消息,我们可以获取到很多有趣的数据. 一.程序界面 二.程序代码 unit Unit1; interface uses Windows, Messages ...