jquery

是javaScript框架,封装了js。

好处:使用方便,少代码多功能。

实现同一个功能的代码量少。

屏蔽浏览器差异。

简化ajax开发。

选择器

基本选择器

1、 id选择器

$(“#id”);è返回指定id的标签,为jquery对象。

2、 元素选择器

$(“tagName”);è返回指定tagName的标签,为jquery对象。

3、 class选择器

$(“.样式表名”);è返回指定样式类名的标签,并包装成jquery对象返回。

4、 多个选择器公用

交集:$(“selector1selector2selector3……”);è返回所有选择器所能匹配到的标签的交集

并集:$(“selector1,selector2,selector3,……”);è返回所有选择器所能匹配到的标签的并集

注:多个选择器共用时,都是从左到右的解析顺序。

每一个jquery里都是一个数组,这个数组是用来存放他所能匹配到的标签(即封装而来的js对象)。

层级选择器

1、 后代选择器(祖孙选择器)

$(“祖先 子孙”);è获得祖先标签下的所有子孙标签

2、 父子选择器

$(“父亲>孩子”);è获得父亲标签下的孩子标签

3、 紧邻兄弟选择器

$(“selector1+selector2”);è选取selector1兄弟节点中的紧挨着的selector2

4、 非紧邻兄弟选择器

$(“selecotr1~selector2”);è选取selector1下面的所有兄弟节点selector2

下面是代码演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div" class="dv">
<input type="text" value="123" id="a" class="b"/>
<input type="button" value="测试id" οnclick="idCheck()"/>
<input type="button" value="测试元素选择器" οnclick="eleCheck()"/>
<input type="button" value="测试类选择器" οnclick="ClassCheck()"/>
<input type="button" value="全选择器" οnclick="ALlCheck()"/>
<input type="button" value="多个选择器公用交集" οnclick="manys()"/>
<input type="button" value="多个选择器公用并集" οnclick="manyss()"/>
<input type="button" value="后代选择器" οnclick="houdai()"/>
<span>brother</span>
<input type="button" value="紧邻兄弟选择器" οnclick="jinlin()"/>
<input type="button" value="非紧邻兄弟选择器" οnclick="feijinlin()"/>
</div>
<p style="display: none" id="sh">Hello</p> <button id="go"> Run</button>
<div id="block">Wa!</div> <button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
</body>
<script src="js/jquery.1.9.2.min.js" type="text/javascript">
</script> <script type="text/javascript">
$(function(){ var a = $("#a")
console.log(a); });
//id选择器
function idCheck(){
var str = $("#a");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//元素选择器
function eleCheck(){
var str = $("input");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//类选择器
function ClassCheck(){
var str = $(".b");
alert("jquery对象:"+str.val());
alert("js对象:"+str.get(0).value);
}
//全选择器
function ALlCheck(){
var str = $("*");
alert(str.html());
}
//多个选择器公用交集
function manys(){
var inputs = $("input#a.b");
alert(inputs.val());
}
//多个选择器公用并集
function manyss(){
var alls = $("body,input");
for(var i=0;i<alls.length;i++){
var temp = alls[i];
alert(temp.id);//获取的是id选择器
}
}
//后代选择器
function houdai(){
var inputs = $("div#a ");
alert(inputs.length); }
//紧邻兄弟选择器
function jinlin(){
var brother_jinlin = $("span+input");
alert(brother_jinlin.length); }
//非紧邻兄弟选择器
function feijinlin(){
var feijinlin_brother = $("span~input");
alert(feijinlin_brother.length);
} $("#sh").show("slow"); $("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
}); //让指定元素左右移动
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
}); $("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
</script>
</html>

Jquery选择器总结一的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  6. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  7. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  9. jQuery-1.9.1源码分析系列(二)jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  10. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

随机推荐

  1. Mybatis笔记 - 原始Dao开发方法

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.原始Dao的开发方式是基于入门程序的基础上,对 控制程序 进行分层开发,程序员需要 编写 Dao接口 和 ...

  2. 标记excel中输入的重复数据

    首先选中需要标记重复的数据列 开始 -> 条件格式 -> 突出显示单元格规则 -> 重复值 选择相应的颜色即可 效果如下:

  3. Web中常见的绕过和技巧

    SQL注入 十六进制绕过引号 slect table_name from information_schema.table where table_schema="sqli"; s ...

  4. spring mvc文件上传报错:Expected MultipartHttpServletRequest: is a MultipartResolver configured?

    报错原因:spring-mvc.xml 的配置文件中,配置文件上传id不为 “multipartResolver” 解决:id 改为 “multipartResolver”

  5. Luogu P2822 组合数问题(前缀和)

    P2822 组合数问题 题意 题目描述 组合数\(C_n^m\)表示的是从\(n\)个物品中选出\(m\)个物品的方案数.举个例子,从\((1,2,3)\)三个物品中选择两个物品可以有\((1,2), ...

  6. 深入理解Java虚拟机(类加载机制)

    文章首发于微信公众号:BaronTalk 上一篇文章我们介绍了「类文件结构」,这一篇我们来看看虚拟机是如何加载类的. 我们的源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机 ...

  7. python requests 高级用法 -- 包括SSL 证书错误的解决方案

    Session Objects会话对象 Session对象在请求时允许你坚持一定的参数.此外,还坚持由Session实例的所有请求的cookie. 让我们坚持在请求时使用 s = requests.S ...

  8. 两个datagrid的数据移动(支持多选)

    1.需求 :点击卸车和撤销按钮可以实现 1和2 之间数据的移动(支持多选) 2. 代码 (这里只写一个撤销的功能) //撤销按钮 function moveOut() { var item = $(' ...

  9. ros Python找不到msg包的问题解决办法

    https://answers.ros.org/question/113671/catkin-package-cannot-find-own-message-type-python/ 原因是因为.py ...

  10. 洛谷P3376【模板】网络最大流 ISAP

    这篇博客写得非常好呀. 传送门 于是我是DCOI这一届第一个网络流写ISAP的人了,之后不用再被YKK她们嘲笑我用Dinic了!就是这样! 感觉ISAP是会比Dinic快,只分一次层,然后不能增广了再 ...