一、什么是jQuery
jQuery是一个轻量级的JavaScript函数库二、jQuery有什么优势
简化JavaScript代码
像css一样获取元素
修改css控制页面效果
兼容常用浏览器三、jQuery引入
<script src="js/Jquery-1.4.2.js"></Script>
jQuery类库本质是一个js文件，与html引入js文件方法是一样的四、jQuery语法
1、$
$符号等价于jQuery，是jQuery的简写
eg：$()相当于调用jQuery()
$("div")
$("div").remove2.文档就绪
在整个html文档架子啊完成之后立即触发，格式：
$(document).ready(function(){
//
});
简写形式：
$(function(){
//
});3.DOM对象与jQuery对象的相互转化
js对象只能调用js上提供的属性和方法，不能调用jQuery提供的属性和方法。
3.1、dom对象转化为dom对象
var dom = document.getElementByld("username");
var $jQuery=$(dom);3.2、jQuery对象转化为dom对象
var $jQuery = $("#username");
//方式一
var dom1 = $jquery[0];
//方式二
var dom2 = $jQuery.get(0);五、jQuery选择器
1、基本选择器
1.1、元素名选择器
$("div")--匹配所有的div元素
1.2、class元素选择器
$(".c1")--匹配所有class值为c1的元素
$("div.c1")--匹配所有class值为c1的div元素
1.3、id选择器
$("#d1")--匹配所有id值为d1的元素
$("div#d1")--匹配所有id值为d1的div元素
1.4、*号匹配符
$("*")--匹配所有元素
1.5、多元素选择器
$("div,span,#d1,.c1")2、层级选择器
如果通过DOM元素之间的层次关系来获取指定元素，例如子元素兄弟元素等，需要通过层级选择器
$("div span")--div下的所有span元素
$("div>span")--div下所有的span子元素
$("div+span")--div后面紧邻的span兄弟元素
$("div~span")--div后面所有的span兄弟元素3、基本过滤选择器
通过指定的过滤规则筛选所需的DOM元素
$("div:first")--匹配所有的div元素中的第一个div元素
$("div:last")--匹配所有div元素的最后一个div元素
$("div:even")--匹配所有div元素中索引值为偶数的div元素，从0开始
$("div:odd")--匹配所有div元素中索引值为奇数的div元素，从0开始
$("div:eq(n)")--匹配所有div元素中索引值为n的div元素，从0开始
$("div:lt(n)")--匹配所有div元素中索引值小于n的div元素，从0开始
$("div:gt(n)")--匹配所有div元素中索引值大于n的div元素，从0开始
$("div:got(.one)")--匹配所有class值不为one的div元素4、内容选择器
$("div:contians('abc')")--匹配所有div中包含abc内容的div元素
$("div:has(p)")--匹配所有包含p元素的div元素
$("div:empty")--匹配所有内容为空的div元素
$("div:parent)--匹配所有内容不为空的div元素5.可见选择器
$("div:hidden")--匹配所有隐藏的div元素
$("div:visible")--匹配所有可见的div元素6.属性选择器
$("div[id]")--匹配所有具有id属性的div元素
$("div[id='d1']")--匹配所有id属性为d1的div元素
$("div[id!='d1']")--匹配所有id属性不为d1的div元素
$("div[id^='d1']")--匹配所有id属性以d1开头的div元素
$("div[id$='d1']")--匹配所有id属性以d1结尾的div元素7、子元素选择器
$("div:nth-child(n)")--n从1开始, 匹配div中第n个子元素。
$("div:first-child")--匹配div中第1个子元素。
$("div:last-child")--匹配div中最后一个子元素。8、表单选择器
$(":input")--匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
$(":password")--匹配所有的密码框
$(":radio")--匹配所有的单选框
$(":checkbox")--匹配所有的复选框
$(":checked")--匹配所有的被选中的单选框/复选框/option
$("input:checked")--匹配所有的被选中的单选框/复选框
$(":selected")--匹配所有被选中的option选项六、文档操作
parent()
$("#d1").parent() – 获取id为d1元素的父元素
parents()
$("#d1").parents() – 获取id为d1元素的祖先元素
$("#d1").parents("tr") – 获取id为d1元素的tr祖先元素
next()
$("div").next() – 获取所匹配元素后面紧邻的兄弟元素
$("div").next("span") – 获取所匹配元素后面紧邻的span兄弟元素
nextAll()
$("div").nextAll() – 获取所匹配元素后面所有的兄弟元素
$("div").nextAll("span") – 获取所匹配元素后面所有的span兄弟元素
prev()
$("div").prev() – 获取所匹配元素前面紧邻的兄弟元素
$("div").prev("span") – 获取所匹配元素前面紧邻的span兄弟元素
prevAll()
$("div").prevAll() – 获取所匹配元素前面所有的兄弟元素
$("div").prevAll("span") – 获取所匹配元素前面所有的span兄弟元素
siblings()
$("div").siblings() – 获取所匹配元素前后所有的兄弟元素
$("div").siblings("span") – 获取所匹配元素前后所有的span兄弟元素
append()
$("div").append("<span></span>") –为所匹配元素追加一个span子元素
remove()
$("div").remove() – 删除所匹配元素
html()
$("div").html() – 获取所匹配元素的html内容
$("div").html("xxx") – 为所匹配元素设置html内容
text()
$("div").text() – 获取所匹配元素的文本内容
$("div").text("xxx") – 为所匹配元素设置文本内容
attr()
$("div").attr("id") – 获取所匹配元素的id属性值
$("div").attr("id", "xx") – 为所匹配元素设置id属性
css
$("div").css("width") – 获取所匹配元素的width样式属性值
$("div").css("width", "200px") – 为所匹配元素设置width样式属性
$("div").css({"width":"200px", "color":"red","font-size":"24px"});–-为所匹配元素设置width样式属性七、事件
click()
$("div").click(function(){}) – 为所匹配元素绑定点击事件
blur()
$("input").blur(function(){}) – 为所匹配元素绑定失去输入焦点事件
focus()
$("input").focus(function(){}) – 为所匹配元素绑定获得输入焦点事件
change()
$("select").change(function(){}) – 为所匹配元素绑定选项切换事件
ready()
$(document).ready(function(){}) – 文档就绪事件
其作用相当于: window.onload = function(){}
简写形式为:$(function(){}) – 在整个文档加载完成后立即执行八、效果
show()
$("div").show() – 将隐藏元素设置为显示(底层操作的是display);
hide()
$("div").show() – 将显示元素设置为隐藏(底层操作的是display);
toggle()
$("div").toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
