jQuery初识

 

jQuery是什么?

jQuery是一个兼容多浏览器的JavaScript库。
jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less,do more."
jQuery包含以下内容:
  1. HTML元素选取
  2. HTML元素操作
  3. CSS操作
  4. HTML事件函数
  5. JavaScript特效和动画
  6. HTML DOM遍历和修改
  7. AJAX

下载链接:jQuery官网

jQuery对象

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

$(“#i1”).html()的意思是:获取id值为i1的元素的HTML代码,其中html()是jQuery里的方法。
相当于JavaScript中的document.getElementById("i1").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery对象无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery也不能使用jQuery里的方法。
jQuery与JavaScript在申明变量的区别:
1 var $variable = jQuery对象
2 var variable = DOM对象
3 $variabl[0] //jQuery对象转换成DOM对象

拿上面的例子举例,jQuery对象和DOM对象的使用:

1 $("#i1").html();    //jQuery对象可以使用jQuery的方法
2 $("#i1")[0].innerHTML; //DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()

查找标签>选择器

id选择器:
$("#id");

class选择器:

$(".className");

标签选择器:

$("tagName");

组合选择器:

$("#id,.className,tagName")  

层级选择器:

$("#id a");    //查找id下方所有的a标签,中间的空格表示后代。
$("#id > a"); //查找第一个a标签

基本选择器:

:first    //第一个
:eq(index) //索引等于index的那个元素
:last //最后一个

属性选择器:

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type = 'checkbox']"); //取到checkbox类型的input标签

筛选器

下一个元素:
1 $("#id").next();    //筛选出下一个元素
2 $("#id").nextAll(); //筛选出下面所有的元素
3 $("#id").nextUntil("#i2"); //筛选出下面所有的元素,找到ID为i2终止

上一个元素:

$("#id").prev();    //筛选出上一个元素
$("#id").prevAll(); //筛选出上面所有的元素
$("#id").prevUntil("#i2"); //筛选出下面所有的元素,找到id为i2终止

父亲元素:

1 $("#id").parent();    //parent() 方法返回被选元素的直接父元素。
2 $("#id").parentsAll(); //parentsAll()返回被选元素的所有祖先元素
3 $("#id").parentsUntil(); //parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。

子元素和同级元素:

$("#id").children();    //所有子元素
$("#id").siblings(); //所有同级元素

查找元素:

$("id").find()

操作>属性

用于自定义属性:
attr()
removeAttr()

用于checkbox和radio

prop()
removeProp()
注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。

练习题:

1.找到本页面中id是i1的标签
    $("#i1")
2.找到本页面中所有的h2标签
    $("h2")
3.找到本页面中所有的input标签
    $("input")
4.找到本页面所有样式类中有c1的标签
    $(".c1")
5.找到本页面所有样式类中有btn-default的标签
    $(".btn-default")
6.找到本页面所有样式类中有c1的标签和所有h2标签
    $(".c1,h2")
7.找到本页面所有样式类中有c1的标签和id是p3的标签
    $(".c1,#p3")
8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
    $(".c1,btn")
9.找到本页面中form标签中的所有input标签
    $("form input")
10.找到本页面中label标签下的input标签子标签
    $("label>input")
11.找到本页面中紧挨着label标签的input标签
    $("label+input")
12.找到本页面中id为p2的标签后面所有和它同级的li标签
    $("#p2~li")
13.找到id值为f1的标签下面的第一个input标签
    $("#f1 input:first")
14.找到id值为my-checkbox的标签下面最后一个input标签
    $("#my-checkbox input:last")
15找到id值为my-checkbox的标签下面没有被选中的那个input标签
    $("#my-checkbox input:not(':checked')")
16.找到所有含有input标签的label标签
    $("label:has(input)")

jQuery筛选器及练习的更多相关文章

  1. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  2. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  3. jQuery筛选器及对DOM修改(学习笔记)

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

  4. 【jQuery】jQuery筛选器规则

    转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...

  5. jQuery筛选器常用总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  7. python jQuery筛选器

    筛选器:$(this).next() 下一个    $(this).prev  上一个    $(this).parent()  父     $(this).children() 孩     $(th ...

  8. JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...

  9. jQuery 筛选器 链式编程操作

    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...

随机推荐

  1. 洛谷 - P2278 - 操作系统 - 模拟

    https://www.luogu.org/problemnew/show/P2278 题目没有说同时到达的优先级最大的应该处理谁. 讲道理就是处理优先级最大的. #include<bits/s ...

  2. 201621123016 《Java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  3. hrbust1444 逃脱 【BFS】

    Description  这是mengxiang000和Tabris来到幼儿园的第四天,幼儿园老师在值班的时候突然发现幼儿园某处发生火灾,而且火势蔓延极快,老师在第一时间就发出了警报,位于幼儿园某处的 ...

  4. Unity2d 骨骼动画1:介绍

    http://bbs.9ria.com/thread-401613-1-1.html by Orlando Pereira and PedroPereira3 days ago2 Comments 在 ...

  5. Linux下安装ruby

    使用apt-get安装 sudo apt-get install ruby 这个命令下载的,有可能是旧的版本,所以还是推荐下面的方式. 下载tar.gz安装 去官方网站下载最新的tar.gz文件 su ...

  6. iOS集成支付宝支付

    本文由本人原创发表于博客园,转载请注明出处 http://www.cnblogs.com/wangqw/p/5074907.html 一. 开发前准备 iOS 支付宝SDK下载地址:(内含iOS An ...

  7. 全球首款iOS模拟器出炉!在违法的边缘疯狂试探

    对于许多智能手机用户,特别是手游玩家来说,在手机屏幕的方寸之间进行操作显然并非特别方便,而且在多年之前,由于手机配置不足,也导致了用PC来玩手游的需求不断涌现.彼时,BlueStacks及夜神等一众A ...

  8. GYM 101673G(dp)

    dp[i][j][0/1]:第i天处于第j状态要不要吃. const int maxn = 1e2 + 5; int n, a[maxn], b[maxn]; int dp[maxn][maxn][2 ...

  9. a标签中href=""的几种用法

    http://blog.csdn.net/u010297791/article/details/52784879 这是分页上的 <?php function pages($page,$e_pag ...

  10. Python临时笔记

    动态语言python的特性 python2  输入一个匿名函数直接执行 # coding=utf-8 def Test(a, b, func): result = func(a, b) return ...