jquery
jquery 是什么？
jquery是一种非常流行的js库，它有采用css选择器的方案查找dom元素，它的宗旨是写的少，做的多。
jquery 优势是什么？
- 查找
dom非常方便 - 支持链式操作
- 兼容性很好
- js自定义动画化
- 封装了xhr对象(ajax)
- 提供插件机制
jquery 下载
版本越高，兼容性越低。
如果要考虑更多兼容，请使用2.0之前的版本。
教学采用的版本是 jquery1.10.2.js
jquery 部署安装
<body>
<script src="js/jquery1.10.2.js"></script>
</body>
</html>
jquery中的工厂函数
$是jquery中的工厂函数，因为通过$(对象|字符串)生成一个jq对象。
$(window)
$(document)
$('#h2')
$('.box')
$('h2')
$('[name="box"]')
只有jq对象才能使用jq的属性和方法
原生js对象不能使用jq的属性和方法
jq对象可以转成js原生对象，js原生对象可以转换jq对象
jq对象本质上就一个类数组对象
//js原生对象转换为 jq对象
var h2 = document.getElementById('h2');
var $h2 = $(h2);
console.log( $h2 );
//jq对象 转换为js原生对象
var $h2 = $('#h2');
var h2 = $h2[0];
jquery中的dom初始化
js原生dom初始化（页面载入完毕）是什么？
window.onload = function(){
}
jq中dom初始化：
css已经解析完毕，元素已经在文档中创建，元素也具备宽和高（图片除外）、偏移等，不必等到图片载入完毕。
jq的dom初始化比原生的onload执行时间要早
//完整版
$(document).ready(function(){
})
//缩写版
$(function(){
})
window.onload 和 $(document).ready的区别？
$(document).ready执行时间要比window.onload更早$(document).ready可以使用多个，代码会合并执行，window.onload只能使用一个，后面的覆盖前面的window.onload。
jq 选择器
基本
- id 选择器
- 类 选择器
- 标签 选择
-
- 通配符选择器（*表示所有）
- 多个选择器
<h4>标题2</h4>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<p>段落</p>
<div>
<button>按钮</button>
<p>段落</p>
</div>
<h2 class="h2" id="h2" name="h2">标题2</h2>
<script src="js/jquery1.10.2.js"></script>
<script>
$(function(){
$('#h2').css('color','red');
$('.h2').css('color','green');
$('h2').css('color','blue');
$('[name="h2"]').css('color','orange');
$('h2,h4').css('color','yellow');
$('li,p,button').css('color','red');
})
</script>
层级
父元素 后代元素父元素 > 直接子元素目标元素 + 同辈紧相邻下一个元素目标元素 ~ 同辈下一个所有元素
基本筛选器
:first：查找第一个:not(selector)：排除选择器中以外的:even：查找偶数:odd：查找奇数:eq(index)：查找指定索引值:gt(index)：查找大于指定索引值（不包含自己）:lt(index)：查找小于指定索引值（不包含自己）:last：查找最后一个:header：查找所有的标题（h1~h6）:animated: 所有正在执行动画效果的元素:focus：匹配当前获取焦点的元素。:root: 永远是<html>元素。:target: 锚点链接和目标锚点相匹配，返回目标锚点对象
内容
:contains(text)： 查包含某文本的元素:empty：所有不包含子元素或者文本的空元素，空格也算（文本节点）:has(selector)：含有选择器所匹配的元素的元素:parent：含有子元素或者文本的元素
<input id="keyword" type="search" placeholder="输入关键字">
<ul class="nav">
<li>网站首页</li>
<li>关于</li>
<li>联系</li>
<li>收藏首页</li>
<li>留言</li>
</ul>
<script src="js/jquery1.10.2.js"></script>
<script>
$(function(){
$('#keyword').on('input',function(){
$('.nav li').css('color','');
if(!this.value) return;
$('.nav li:contains('+this.value+')').css('color','red');
})
})
</script>
可见性
:hidden： 所有不可见元素（不是透明度为0，visibility: hidden），或者type为hidden的元素，display:none也为不可见，不可见元素主要体现在不在文档流，不占任何位置。:visible：匹配所有的可见元素
属性
[attribute]查找包含某个属性[attribute=value]查找包含某个属性，并且该属性等于具体值[attribute!=value]查找包含某个属性不等于具体值的元素[attribute^=value]查找属性值以什么开头[attribute$=value]查找属性值以什么结尾[attribute*=value]查找属性值包含什么值[attrSel1][attrSel2][attrSelN]查找多个条件属性
子元素
:first-child查找第一个子元素，比如:first范围要广，它找的所有后代元素的第一个元素。:last-child查找最后一个子元素，比如:last范围要广，它找的所有后代元素的最后一个子元素。:first-of-type:nth-child查找指定序号的元素，从1开始计算 （从上往下数）nth-last-child查找指定序号的元素，从1开始计算 （从下往上数）
表单
:input所有input,textarea,select和button元素:text匹配单行文本框:password匹配密码框:radio匹配单选框:checkbox匹配复选框:submit匹配提交按钮input type="submit"button type="submit":reset匹配重置按钮:button匹配普通按钮:file匹配上传文件框:image匹配图像域
表单对象属性
:enabled匹配所有可用元素:disabled匹配不可以元素:checked匹配选中元素（单选框、复选框）:selected匹配选中元素（下拉列表框）
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
