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. iOS开发之SceneKit框架--SCNAction.h

    1.SCNAction简介 主要负责节点SCNNode的属性,实现node的渐变.移动.出现.消失.实现动画等. 2.相关API 节点的移动(earthNode的初始坐标(5,0,0)) //从当前位 ...

  2. idea从github中pull或者push成功之后tomcat启动不了,报Error....

    解决方案:删除deployment里面的war包,确定. 再在deployment里面重新添加一个war包,确定,即可.

  3. <每日一题>题目1:简单的注册和登录1.0

    #版本1.0,最基本的注册登录'''1.注册,将账号和密码分别写在不同的文档里面2.登录,分别从账户文档和密码文档进行读取并登录''' #注册 Identity = input("请输入您想 ...

  4. Java基础 ----- 判断对象的类型

    1. 判断对象的类型:instanceOf 和 isInstance 或者直接将对象强转给任意一个类型,如果转换成功,则可以确定,如果不成功,在异常提示中可以确定类型 public static vo ...

  5. wpf 几种常用控件样式

    转自:http://blog.csdn.net/xuejiren/article/details/39449515

  6. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  7. WebClient 上传文件 上传文件到服务器端

    一直对于上传文件到服务器端困惑:以前,现在,学到了关于WebClient的post知识 瞬间对于上传文件到服务器觉得好轻松: 原理很简单:我们通过post服务器的页面:把本地的文件直接传递过去: 现在 ...

  8. Ubuntu环境下使用Maven编译并打包Java项目

    一.安装Maven 打开终端输入以下指令: $ mvn -v Apache Maven Maven home: /usr/share/maven Java version: 1.8.0_181, ve ...

  9. ES6和常用特性归纳

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ECMAS ...

  10. webservice、httpClient、dubbo的区别

    在开发中,对于同一个war包中的对象方法我们可以直接调用,但是很多情况下需要在不同项目或者不同服务器进行相互调用 webservice webservice技术可以实现不同服务器项目直接的调用和交换数 ...