jquery选择器和基本操作

定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

实例:

 $("#test").html() 

          意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

          这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

          虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

          约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

 var $variable = jQuery 对象

 var variable = DOM 对象

 $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

1.选择器和筛选器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-3.3.1.js"></script>

 </head>

 <body>

 <div class="c2">

     <p class="c4">111</p>

     <p class="c4">222</p>

     <div><p class="c4">123</p></div>

     <a id="a1" href="">click</a>

 </div>

 <p class="c4">234</p>

 <p class="c4">234</p>

 <div  alex="dsb" peiqi="" class="c21">alex和配齐</div>

 <div alex="dsb">alex</div>

 <div peiqi="">8888</div>

 <div class="p1">

      <p class="c3" id="i3">222</p>

      <p class="c3">333</p>

      <p class="c3" id="i2">444</p>

      <p class="c3">555</p>

      <p class="c3 c8">666</p>

      <p class="c3">777</p>

 </div>

 <div class="c5">

     <input type="checkbox">

     <input type="checkbox">

     <input type="checkbox">

 </div>

 <div class="c9">

     <p>111</p>

     <p>222</p>

     <div class="c10">

         <p>333</p>

     </div>

     <a href="">click</a>

 </div>

 <script>

     /*

     // 01 选择器

     // 1.1 基本选择器

     //$("*").css("color","red")

     // $(".c2").css("color","red")

     // $("#a1").css("color","red")

     // $("p").css("color","green")

 // 1.2 层级选择器

     //$(".c2 div").css("color","green")

     //$(".c2 p").css("color","green")  //子孙后代

     //$(".c2>p").css("color","green") //仅限儿子们

     //$(".c2+p").css("color","red") //同级下一个 剩下的不要

     //$(".c2~p").css("color","red") //同级下面P标签全要

 // 1.3 基本筛选器

     //$(".c3:first").css("color","red");

     //$(".c3:eq(2)").css("color","red"); // eq(索引号)

     //$(".c3:gt(1)").css("color","red");  //gt(1)索引大于1的标签

     //$(".c3:lt(4)").css("color","red");  //lt(1)索引小于4的标签

     //$(".c3:even").css("color","red"); //偶数

     //$(".c3:odd").css("color","red");  //奇数

 //1.4 属性选择器

     //$("[peiqi]").css("color","red");

     //$("[alex='dsb'][peiqi]").css("color","red");

 //1.5 表单选择器

         //以下三种写法效果一样

     //$("[type='checkbox']").attr("checked","checked");

     //$(":checkbox").attr("checked","checked")

     //$("input:checkbox").attr("checked","checked")  //仅限input标签

      */

     /*

     // 02 进阶筛选器

     // $(".c3").first().css("color","red");

     // var index=3;

     // $(".c3:"+"eq("+index+")").css("color","red"); //这种写法不方便赋值,不推荐

     // $(".c3").eq(index).css("color","red");

      // 判断某个标签是否拥有某个class名

  //    console.log($("[alex]").hasClass("c21"));

      */

     /*

     // 03 导航选择器

         //3.1 查找兄弟标签

     //  $("#i2").next().css("color","red");

     //  $("#i2").nextAll().css("color","red");

     //  $("#i2").nextUntil(".c8").css("color","red");

     //  $("#i2").prev().css("color","red");

     //  $("#i2").prevAll().css("color","red");

     //  $("#i2").prevUntil("#i3").css("color","red");

     //  $("#i2").siblings().css("color","red"); //除选中标签外的兄弟标签 很重要

     // 3.2 查找子孙标签

     // console.log($(".c9").children());  //结果:jQuery.fn.init(4) [p, p, div.c10, a, prevObject: jQuery.fn.init(1)]

 //     $(".c9").children().first().css("color","red");

 //     $(".c9").children("p").css("color","red"); //只查找到儿子那一代的p

 //     $(".c9").find("p").css("color","red"); //查找子孙所有P

 //     $(".c9").children(".c10").css("color","red");

     // 3.3查找父类标签

     // console.log($(".c10").parent()); //只查找到父亲

     // console.log($(".c10").parents()); //父亲,爷爷.....

      // $(".c10").parentsUntil()

      */

 </script>

 </body>

 </html>

2.事件绑定

 <ul class="box">

     <li>123</li>

     <li>234</li>

     <li>456</li>

     <li>567</li>

     <li class="c1">678</li>

 </ul>

 <button class="add">ADD</button>

 <script src="jquery-3.3.1.js"></script>

 <script>

     //基本形式 $().事件(function(){})

     // 01 普通绑定事件

     // $(".box li").click(function(){

     //     alert($(this).html())

     // })

     // 委托绑定  绑定父类.on(指定事件类型,指定子标签,指定函数)

     //  $(".box").on("click","li",function(){

     //       alert($(this).html())

     //  })

     //

     // $(".add").click(function(){

     //     $(".box").append("<li>789</li>")

     // })

3.jquery操作

 <p><a href="">123</a></p>

 <script>

     // 01 文本操作

     // console.log($("p").html());

     // console.log($("p").text());

     // $("p").text("<a href=''>456</a>");

     // $("p").html("<a href=''>456</a>");

     //02 属性操作

     // $().attr("")

     // $().attr("","")

     // $("p").attr("alex")

     // $("p").attr("alex","dsb")

     // $("p").removeAttr("class")

     // 03 class操作

     // $("p").addClass("c1")

     // $("p").removeClass("c1")

     //04 jquery 获取索引值

4补充:jquery索引获取

 ul>

 <li id="foo">foo</li>

 <li id="bar">bar</li>

 <li id="baz">baz</li>

 </ul>

 <script>

     i1 = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置

     i2 = $('li').index($('#baz')); //1，传递一个jQuery对象

     i3 = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置

     i4 = $('#baz').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置

     i5 = $('#baz').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

     console.log(i1,i2,i3,i4,i5)

 </script>

 <!--//用于二级或者三级联动 -->

 <div id="nav">

 <a href="http://www.jbxue.com/">建站素材</a>

 <a href="http://www.jbxue.com/">jquery特效</a>

 <a href="http://www.jbxue.com/">脚本学堂</a>

 <a href="http://www.jbxue.com/wb/">网站编程</a>

 </div>

 <script>

     $("#nav a").click(function(){

     //四个经典的用法

         var index1 = $("#nav a").index(this);

         var index2 = $("#nav a").index($(this));

         var index3 = $(this).index()

         var index3 = $(this).index("a")

         alert(index3);

         return false;

     });

 </script>

参考自:https://www.cnblogs.com/yuanchenqi/articles/6936986.html?tdsourcetag=s_pctim_aiomsg

jquery选择器和基本操作的更多相关文章

JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
jQuery的案例及必知重要的jQuery选择器
Jquery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合 Jquery的优势体积小,压缩后只有100KB左右 l强大的选择器出 ...
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器前面的话选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素前面的话本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性前面的话属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素前面的话在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
jQuery-1.9.1源码分析系列（二）jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

随机推荐

颠倒的价牌|2013年蓝桥杯A组题解析第四题-fishers
颠倒的价牌小李的店里专卖其它店中下架的样品电视机,可称为:样品电视专卖店. 其标价都是4位数字(即千元不等). 小李为了标价清晰.方便,使用了预制的类似数码管的标价签,只要用颜色笔涂数字就可以了(参 ...
POJ 3041 Asteroids（最小点覆盖）题解
题意:n*n的网格中有k个点,开一枪能摧毁一行或一列的所有点,问最少开几枪思路:我们把网格看成两个集合,行集合和列集合,如果有点x,y那么就连接x->y,所以我们只要做最小点覆盖就好了. 参考 ...
java中垃圾回收算法讲解
判断对象是否存活的方法: 一.引用计数算法(Reference Counting) 介绍:给对象添加一个引用计数器,每当一个地方引用它时,数据器加1:当引用失效时,计数器减1:计数器为0的即可被回 ...
后台返回数据判断是http还是后台本地图片 indexOf
今天的笔记呢,记录一下其实这个应该后台去判断的,但是因为某种原因,今天我们前台做一下判断事情是这样的,后台返回我一个url 这个url有的http开头的也有他后台本地的例如:/img/1.pn ...
【Selenium2】【Shell】
E:\test_object>Python all_test.py >> report/log.txt 2>&1
linux 校准时间方法
Debian.Ubuntu 系统安装NTP校时包: apt-get install ntpdate CentOS系统安装NTP校时包: yum install ntp 校时 ...
linux运行lnmp 出现502错误
之前遇到的问题: 安装好之后访问域名出现502错误,打开html文件正常,说明是php出现问题.在wwwlog文件夹查看nginx日志,发现报错原因是找不到/var/run/php5-fpm.sock ...
Mongodb 创建管理员帐号与普通帐号
数据库操作权限 readAnyDatabase 任何数据库的只读权限 userAdminAnyDatabase 任何数据库的读写权限 userAdminAnyDatabase 任何数据库用户的管理权限 ...
MySQL 并发测试中，线程数和数据库连接池的实验
我一直以来,对性能测试中,连接池的大小要如何配置,不是太清楚: 就我所知道的,就DB自带对连接数的限制,在sqlserver中用select @@connection 可以查到, 在代码中,可以配置D ...
Windows下的Python 3.6.1的下载与安装（适合32bits和64bits）（图文详解）
不多说,直接上干货! 为什么,这么简单的一个python,我还要特意来写一篇博客呢? 是因为留念下,在使用了Anaconda2和Anaconda3的基础上,现在需安装python3.6.0来做数据分析 ...

jquery选择器和基本操作

jquery选择器和基本操作的更多相关文章

随机推荐

热门专题