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. Docker+JMeter单机版+Nginx

    基于JMeter5.1.1+Nginx1.12.2JMeter发起压测  Nginx作为文件服务器 一.目录结构: Dockerfile文件: FROM ubuntu:18.04# 基础镜像 MAIN ...

  2. java包装类型的一些知识点

    关键字:包装类的缓存,包装类之间数值的比较 来源:https://www.cnblogs.com/hdwang/p/7009449.html https://www.cnblogs.com/Dream ...

  3. Thinkcmf对接支付宝支付和获取用户信息

    一.         登录支付宝开放平台 平台地址:https://open.alipay.com/ 二.         创建应用并申请上线 登录后,[进入我的开放平台],依次点击[开发者中心]-& ...

  4. Explainable ML

    定义: 不仅可以(分类),还要输出分类的理由是什么(局部),以及某一个分类的判断标准(全局) 局部: silence map. 把{x1.....xn}中每一个像素加一个偏移量之后,得到的y偏移量与x ...

  5. 8.1.1 IO

    IO对象无拷贝或赋值.进行IO操作的函数通常以引用的方式传递和返回流,且该引用不能是const的 确定一个流对象是否处于良好状态的最简单的方法是将它作为一个条件来使用 while (cin >& ...

  6. powerdesigner16.5改变数据模型字体大小

    1. 点击 2. 选择 3. 选择完点击确定后: 4. 点击设为默认:再点ok

  7. Django_视图

    1. 视图 1.1 返回json数据 2. url配置 url组成 3. 获取 url参数 别名 4. url反向解析 接收参数 reverse 5. 视图总结 5.1 自定义错误页面 6. Http ...

  8. Verilog 编写规范

    在学习Python时,作者有一句话对我影响很大.作者希望我们在学习编写程序的时候注意一些业内约定的规范.在内行人眼中,你的编写格式,就已经暴露了你的程度.学习verilog也是一样的道理,一段好的ve ...

  9. Tex 一些命令

    1. [!htp] 可以使这个内容跟随在前面的内容后面 假如前面是一段文字,后面是一幅图像,不知什么原因跑到其他地方去了.这时加个[!htp]可以使他紧紧跟在后面 ergdsgagdfgdfgfgaf ...

  10. PMP概略学习下--主体内容

    4  知识主体 4.1 主要知识简介 PMP所有的知识围绕五大过程组和十大知识领域展开.五大过程组包括启动.规划.执行.监控.结尾.启动的内容主要是定义项目或阶段.获得授权以及正式开始:规划的内容主要 ...