[JQ]笔记1_JQ入门&选择器
–> 类库简述
–> jQuery简介
–> jQuery环境的配置
–> $(document).ready与window.onload的区别
–> jQuery选择器
基本选择器、层次选择器、过滤选择器
内容过滤选择器、属性过滤选择器、子元素过滤选择器
一、类库简述
大多数 JavaScript 框架一般都具备的特性包括：
选择器（Selector）
DOM 遍历
DOM 操作
实用函数
事件处理
Ajax
前端开发框架:
Prototype Dojo YUI Ext JS MooTools
Bootstrap jQuery jQuery Mobile ……
二、jQuery简介
1、jQuery，顾名思议，也就是JavaScript和查询（Query）即辅助JavaScript开发的类库。
2、jQuery是一个兼容多浏览器的javascript库，核心理念是
write less,do more(写得更少,做得更多)。
3、jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众 多JavaScript高手加入，由Dave Methvin率领团队进行开发。
4、如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超 过55%在使用jQuery。
三、配置jQuery环境
1、获取jQuery类库
进入jQuery官网或其他平台下载jQuery文件
通常每个版本号有两个版本可供下载
生产版 - 用于实际的网站中，已被精简和压缩
开发版 - 用于测试和开发，未压缩，是可读的代码
2.0及之后的版本，不再兼容 IE 6 7 8
2、在页面中引入jQuery
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
用js模拟jq点击事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> *{margin:0;} div{ width:300px; height: 300px; background: #eee; } </style>
</head>
<body>
<div id="box">点我</div>
</body>
<script> (function(){ function $(targetID){ var str=targetID.substring(0,1);//截取第0个元素1个 if (str=='#') { var ID=targetID.replace(/#/g,'') var obj=document.getElementById(ID); obj.click=function(fn){ this.onclick=fn; } return obj; } } window.Jquery=$;//对外公开接口 window.$=window.Jquery;//对外公开接口 })(); Jquery('#box').click(function(){ alert('box1'); }); $('#box').click(function(){ alert('box2'); }); </script>
</html>四、jQuery执行情况
1、 在jQuery库中，jQuery的一个简写形式
例如： $(“#nan”)==jQuery(“#nan”)
2、当浏览器解析完DOM之后，执行ready小括号内的函数
3、ready与onload的简单区别
执行时机
编写个数
简写
$(document).ready( function () { …} )
可以简写为：$(function () {…} )
五、jQuery优势
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源
六、jQuery选择器
1、jQuery选择器的优势
简洁的写法
支持CSS1到CSS3选择器
完善的处理机制
2、jQuery选择器的分类
基本选择器
层次选择器
过滤选择器
基本选择器：
(“#test”)选取id为test的元素—单个元素(“.test”)选取所有class为test的元素—集合元素
$(“p”)选取所有的
元素—集合元素
(“∗”)选取所有的元素—集合元素 (“div,span,p.myClass”)选取所有
标签的一级组元素—集合元素
层次选择器：
$(“div span”)选取
$(“div>span”)选取
$(“.one+div”)选取class为one的下一个
$(“#two~div”)选取id为two的元素后面的所有
基本过滤选择器：
$(“div:first”)选取所有
$(“div:last”)选取所有
(“input:not(.myClass)”)选取class不是myClass的元素—集合元素 (“input:even”)选取索引(索引从0开始,0算为偶数)是偶数的元素—集合元素
(“input:odd”)选取索引(索引从0开始)是奇数的元素—集合元素 (“input:eq(1)”)选取索引(索引从0开始)等于1的元素—单个元素
(“input:gt(1)”)选取索引(索引从0开始)大于1的元素—集合元素 (“input:it(1)”)选取索引(索引从0开始)小于1的元素—集合元素
内容过滤选择器：
$(‘div:contains(“测试”)’)选取包含文本“测试”的
$(“div:empty”)选取不包含子元素和文本的
$(“div:has(p)”)选取含有
元素的
$(“div:parent”)选取拥有子元素或文本元素的
属性过滤选择器：
(“div[id]”)选取拥有属性id的div元素—集合元素 (“div[title=test]”)选取属性title为“test”的
$(“div[title!=test]”)选取属性title不等于“test”的
$(“div[title^=test]”)选取属性title以“test”开始的
(“div[title =test]”)选取属性title以“test”结束的
$(“div[title*=test]”)选取属性title含有“test”的
(“div[id][title =‘test’]”)选取拥有属性id,并且属性title以”test”结束的
子元素过滤选择器：
(“div:nth−child(1)”)选取所有div中，是其父标签的第一个子标签的div元素—集合元素 (“ul li:first-child”)选取每个ul中第一个li元素—集合元素
(“ulli:last−child”)选取每个ul中最后一个li元素—集合元素 (“ul li:only-child”)在ul中选取是惟一子元素的li元素—集合元素
关于选择器的例子（可以复制代码挨个尝试）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
<style> *{margin:0;padding:0;list-style: none;font-size: 24px;color:#333;} #wrap{width:360px; border:1px solid #666;} </style>
</head>
<body>
<div id="wrap">
<span>我是span1标签</span>
<p>我是p1标签</p>
<p id="p2">我是p2标签</p>
<p class="bg3 bgpink">我是p3标签</p>
<div>
<p>我是p4标签</p>
<p>我是p4标签</p>
</div>
<p class="bgblue">我是p5标签</p>
<p>我是p6标签</p>
<p class="bgpink bg7">我是p7标签</p>
<div>
<h5>我是h5标签</h5>
<p>我是p4标签</p>
<span>2132</span>
</div>
<p class="bgblue bg8">我是p8标签</p>
<p style="height:20px;width:360px;"></p>
<p>
<span>我是span2标签</span>
<span>我是span3标签</span>
</p>
<p>
<a href="#">我是a标签</a>
</p>
</div>
<span>我是span4标签</span>
</body>
<script src="jquery-1.8.3.js"></script>
<script> /*基本选择器*/ /*$('#p2').css({'background':'blue'}); $('.bgpink').css({'background':'pink'}); $('p').css({'background':'red'}); $('*').css({'background':'green'}); //群组选择器 $('#p2,.bgpink,span').css({'background':'orange'});*/ /*层次选择器*/ //选取<div>里的所有的<span>元素 /*$('div span').css({'background':'blue'}); // 选取<div>元素下元素名是<span>的子元素 $('div>span').css({'background':'green'}); // 选取紧接在.bgpink元素后的p元素 $('.bgpink+p').css({'background':'pink'}); //选取id为p2的元素之后的所有类名为bgpink同辈元素 $('#p2~.bgpink').css({'background':'orange'});*/ /*基本过滤选择器*/ /*$('p:first').css({'background':'blue'}); $('div:last').css({'background':'green'}); $('p:not(.bgpink)').css({'background':'pink'}); //选取索引是偶数的所有元素，索引从0开始 $('p:even').css({'background':'orange'}); //选取索引是奇数的所有元素，索引从0开始 $('p:odd').css({'background':'blue'});*/ //选取索引等于index的<p>元素(index从0开始) /*$('p:eq(3)').css({'background':'blue'}); //选取索引大于index的<p>元素(index从0开始) $('p:gt(3)').css({'background':'pink'}); //选取索引小于index的<p>元素(index从0开始) $('p:lt(3)').css({'background':'orange'});*/ /*内容过滤选择器*/ //选取含有文本内容包含“2”的<p>元素 // $('p:contains(2)').css({'background':'blue'}); //选取不包含子元素或者文本的空元素<p> // $('p:empty').css({'background':'green'}); //选取含有<span>元素的<p>元素 // $('p:has(span)').css({'background':'pink'}); //选取含有子元素或者文本的<p>元素(非空元素) // $('p:parent').css({'background':'orange'}); /*属性过滤选择器*/ // $('p[class]').css({'background':'pink'}); // $('p[class=bgblue]').css({'background':'blue'}); //选取class属性的值不等于bgpink的<p>元素 // $('p[class!=bgpink]').css({'background':'green'}); //选取class属性的值以bgpink开始的<p>元素 // $('p[class^=bgpink]').css({'background':'red'}); //选取class属性的值以bgpink结束的<p>元素 // $('p[class$=bgpink]').css({'background':'yellow'}); // 选取class属性的值含有bgblue的<p>元素 // $('p[class*=bgblue]').css({'background':'blue'}); // 选择满足所有属性选择器的<p>元素????? // $("p[class$=bgpink][class=bgblue][id]").css({'background':'yellow'}); /*子元素过滤选择器*/ //选取素每个父元素下的第2个<p>元素(index从1开始) $('p:nth-child(2)').css({'background':'pink'}); //选取素每个父元素下的偶<p>元素(index从1开始) /*$('p:nth-child(even)').css({'background':'blue'}); //选取素每个父元素下的奇<p>元素(index从1开始) $('p:nth-child(odd)').css({'background':'yellow'}); //选取所有<div>父元素的第一个<h5>子元素 $('div h5:first-child').css({'background':'orange'}); //选取所有<div>父元素的最后一个<p>子元素 $('div p:last-child').css({'background':'red'}); //如果某个元素是它父元素中唯一的子元素，那么将会被匹配。 $('p a:only-child').css({'background':'green'});*/ </script>
</html>
<!-- 子元素选择器重难点 1、first-child与：first的区别 $(“ul li: first-child”)选取每个<ul>中第一个<li>元素 ->每个<ul>中第一个元素->必须是<li>->才会被选中->否则不会被选中 $(‘div:first’)选择所有div标签中的第一个。 2、nth-child(index)与：eq(index)的区别 index从1开始 index从0开始 $(‘div:nth-child(1)’) 选取所有<div>中是其父标签的第一个子标签的div； ->每个<div>有父标签&父标签第i个子标签必须是<div>->才会被选中 $(‘div:eq(0)’);选取第一个div； -->
1、first-child与：first的区别
$(“ul li: first-child”)选取每个<ul>中第一个<li>元素
->每个<ul>中第一个元素->必须是<li>->才会被选中->否则不会被选中
$(‘div:first’)选择所有div标签中的第一个。
2、nth-child(index)与：eq(index)的区别
index从1开始 index从0开始
$(‘div:nth-child(1)’) 选取所有
->每个
$(‘div:eq(0)’);选取第一个div；
理解nth-child(2n)&nth-child(2n+1)&nth-child(3n+1)–n从哪开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style> ul{ overflow: hidden; list-style: none; } ul li{ float: left; width:70px; height:70px; border-radius: 50%; background: red; } </style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script> $(function(){ // $('ul li:nth-child(2n)').css('background','blue');//索引从1开始 // $('ul li:nth-child(2n+1)').css('background','blue');//索引从0开始 // $('ul li:nth-child(3n)').css('background','blue');//索引从1开始 // $('ul li:nth-child(3n+1)').css('background','blue');//索引从0开始 $('ul li:nth-child(3n+2)').css('background','blue');//索引从0开始 }); </script>
</html>