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. 【算法学习记录-排序题】【PAT A1016】Phone Bills

    A long-distance telephone company charges its customers by the following rules: Making a long-distan ...

  2. Sobel边缘检测算法

    索贝尔算子(Sobel operator)主要用作边缘检测,在技术上,它是一离散性差分算子,用来运算图像亮度函数的灰度之近似值.在图像的任何一点使用此算子,将会产生对应的灰度矢量或是其法矢量 Sobe ...

  3. SQL中 select count(1) count中的1 到底是什么意思呢?和count(*)的区别

    count(1),其实就是计算一共有多少符合条件的行. 1并不是表示第一个字段,而是表示一个固定值.其实就可以想成表中有这么一个字段,这个字段就是固定值1,count(1),就是计算一共有多少个1.同 ...

  4. 洛谷P1433 吃奶酪

    #include<iostream> #include<math.h> using namespace std ; ; int n; bool st[N]; double x[ ...

  5. 关于JavaScript中0、空字符串、'0'是true还是false的总结

    最近被问到关于js中空字符串是true还是false得问题,一时间没想起来,现在在chrome的console面板上输出代码测试一下. "" == false 结果是true    ...

  6. 【转载】Windows环境下JNI的实现实例

    转自:http://blog.csdn.net/jjunjoe/article/details/6987183 一.关于JNI: JNI(Java Native Interface):Java本地调用 ...

  7. go语言 二叉树

    package main import ( "fmt" "reflect" ) type BinaryNode struct { Data interface{ ...

  8. python正则非贪婪模式

    上一篇python正则匹配次数大家应该也发现了,除了?其他匹配次数规则都是尽可能多的匹配 那如果只想匹配1次怎么办呢,这就是正则中非贪婪模式的概念了 原理就是利用?与其他匹配次数规则进行组合 单个匹配 ...

  9. python正则元字符的含义

    练习的时候使用linux+ipython,ipython安装 python的元字符 # 元字符 :#  .   ^   $   *   +   ?   {}  []   \   |   () 注:\w ...

  10. AVL树的详细实现

    [原文:https://cloud.tencent.com/developer/article/1155143] AVL树简介 AVL树的名字来源于它的发明作者G.M. Adelson-Velsky ...