Jquery选择器总结一
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选择器总结一的更多相关文章
- 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 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
随机推荐
- iOS开发之SceneKit框架--SCNAction.h
1.SCNAction简介 主要负责节点SCNNode的属性,实现node的渐变.移动.出现.消失.实现动画等. 2.相关API 节点的移动(earthNode的初始坐标(5,0,0)) //从当前位 ...
- idea从github中pull或者push成功之后tomcat启动不了,报Error....
解决方案:删除deployment里面的war包,确定. 再在deployment里面重新添加一个war包,确定,即可.
- <每日一题>题目1:简单的注册和登录1.0
#版本1.0,最基本的注册登录'''1.注册,将账号和密码分别写在不同的文档里面2.登录,分别从账户文档和密码文档进行读取并登录''' #注册 Identity = input("请输入您想 ...
- Java基础 ----- 判断对象的类型
1. 判断对象的类型:instanceOf 和 isInstance 或者直接将对象强转给任意一个类型,如果转换成功,则可以确定,如果不成功,在异常提示中可以确定类型 public static vo ...
- wpf 几种常用控件样式
转自:http://blog.csdn.net/xuejiren/article/details/39449515
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- WebClient 上传文件 上传文件到服务器端
一直对于上传文件到服务器端困惑:以前,现在,学到了关于WebClient的post知识 瞬间对于上传文件到服务器觉得好轻松: 原理很简单:我们通过post服务器的页面:把本地的文件直接传递过去: 现在 ...
- Ubuntu环境下使用Maven编译并打包Java项目
一.安装Maven 打开终端输入以下指令: $ mvn -v Apache Maven Maven home: /usr/share/maven Java version: 1.8.0_181, ve ...
- ES6和常用特性归纳
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ECMAS ...
- webservice、httpClient、dubbo的区别
在开发中,对于同一个war包中的对象方法我们可以直接调用,但是很多情况下需要在不同项目或者不同服务器进行相互调用 webservice webservice技术可以实现不同服务器项目直接的调用和交换数 ...