每天一个小知识点7（ 4000 jQuer总结一）



jQuery总结 一

了解jQuery
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
注意:
jQuery2.0及后续版本将不再支持IE6/7/8浏览器
优势：
轻量级--可以看一下jquery的文件
强大的选择器，css有的他都有，css没有的他也有 //选择器越多，开发越简单
大量封装好的dom操作，我们不需要再去写麻烦的dom代码，直接调用
可靠的事件处理机制
完善的ajax---对ajax完美支持
出色的浏览器兼容性
(个人认为最棒的)链式操作
丰富的插件：东西好了用的人就多，用的人多了别人写好的代码我们可以借用
完善的文档，帮你更快的学习和查询
开源-源代码的可见，任何人可以自由的使用并提出修改
jquery的使用
引入jquery文档

<script src="jquery-1.7.min.js"></script>

实验引入成功没

$(document).ready(function(){
alert("hello world");
})//这个方法相当于之前的window.onload()

--这里插播个非常好玩的东西

window.onload=function(){
alert("hello")
} x2---注意会执行几次？

区别1：
window.onload---当网页中所有类容加载完毕之后再执行，包括图片 jquery的方式：网页中dom结构绘制完毕后就开始执行，可能dom元素相关联的东西并没有加载完成 但这么写太麻烦了，我们一般简写

$(function(){
alert("hello world")
})

jquery对象和dom对象
什么是dom对象
文档对象模型中的dom树，dom树上的每一个元素节点就是一个dom对象

var obj=document.getElementById("id")-----这玩意就是获得dom对象

jquery对象
jquery对象---是指jquery包装dom对象后产生的对象

$("#message")---获得id为message的对象

案例：

$("#message").html("nihao")
//等价于
document.getElementById("message").innerHTML="nihao"

没必要的话jquery的东西尽量不要和原生态js混搭使用
注意从上边可以看出来jquery对象和js对象并不能完全是一个东西的 所以以后我们写代码用这样的风格

var $temp=$("#temp")//jQuery对象
var temp=document.getElementById("temp")//dom对象

互相转换
jQuery提供了两种方式来转换

jQuery对象是一个数组对象可以通过[index]方式来获得dom对象

var $p=$("#message")
var p=$p[0]
p.innerHTML="hello world"

jQuery本身提供的get(index)来获得

var $p=$("#message")
var p=$p.get(0)
p.innerHTML="hello world"

dom对象转换成为jQuery对象
这个非常简单实用一个$()包起来就可以了

var p1=document.getElementById("message");
var $p1=$(p1);
$p1.text("hello world2")

jquery选择器的使用
*选择器我们已经用了很久了，用处就是通过选择器很快的找到网页上的dom并且操作他们
jQuery在选择器的风格上完全继承了css的那一套东西，并且更加强大，为我们写代码提供了很方便的帮助*
常用选择器
id选择器----$('#ipt')
class类选择器----$('.ipt')
element元素选择器----$('input')
群组---集合元素选择器----$('input,#bt1,.bt2')
后代选择器$('div span')//选取div里边所有的span
选取直接后代----$('parent>child')
选取class 为one的下一个
兄弟元素----$('.one+div')

选取id为two的元素后边的
元素----$('#two~div')

过滤选择器
$('div:first')----选取所有div元素中的第一个div元素
$('div:last')----选取所有div元素中的最后一个div元素
$('div:not(.mini)')----选取class不为mini的元素
$('div:even')----div索引值为偶数的元素 索引从0开始
$('div:odd')---- div索引值为奇数的元素 索引从0开始
$('div:eq(2)')----指定div索引为2的值 索引从0开始
$('div:gt(2)')----指定大于索引大于2的元素 索引从0开始
$('div:lt(2)')----指定大于索引小于2的元素 索引从0开始
$('div:contains(dv)')----找到类容中有dv的元素--会包含到它的父元素-但不包含子元素
$('div:empty')----类容为空的元素 不影响父元素
$('div:has(.mini)')----div中含有class为mini的元素
$('div:parent')----有子元素或者类容的元素
$('div:hidden')----选取div所有不可见元素
$('div:visible')----选取div所有可见
属性过滤选择器
$('div[title]')----div中有title属性的元素
$('div[title=test]')----div中有title属性的元素并且=test的元素
$('div[title!=test]')----div中title属性!=test的元素包括没有title属性的
$('div[title^=te]')----div中title属性以te开头的元素
$('div[title$=ts]')----div中title属性的值以ts结尾的元素
$('div[title*=es]')----div中title属性的值包含es的元素
$('div[id][title*=es]')----div中有id属性并且title属性值包含es的元素
子元素过滤选择器---重要
$('div .one:nth-child(2)')----选取div中class为one第二个子元素 下表index从1开始
$('div:nth-child(odd)')----选取div中奇数
$('div.one :first-child')----选择class为one的div块中第一个子元素
$('div.one :last-child')----选择class为one的div块中最后一个子元素
$('div.one :only-child')----只有一个子元素
表单对象属性
:enabled 选取可用元素
:disabled选取不可用元素
:checked--多选框被选中的
:selected --下拉列表中被选中

详细的选择器 查看jquery的API