jQuery语法
$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有<p>元素
$("p.test").hide() // 隐藏所有class="test"的<p>元素
$("#test").hide() //隐藏所有id="test"的元素
JQuery选择器
$("*") //选取所有元素
$("this") //选取当前HTML元素
$("p.into") //选取class为into的<p>元素
$("p:first") //选取第一个<p>元素
$("ul li:first") //选取第一<ul>元素的第一个<p>元素
$("ul li:first-child") //选取每个<ul>元素的第一个<p>元素
$("a[target='_blank']") 选取所有target属性等于"_blank"的<a>元素
$("[href]") //选取带有href属性的元素
$(":button") //选取所有type="button"的<input>元素和<button>元素
JQuery事件
鼠标事件
$("p").click(function(){
console.log("鼠标点击<p>元素后执行代码")
})
$("p").dblclick(function(){
console.log("鼠标双击<p>元素后执行代码")
})
$("p").mouseenter(function(){
console.log("当鼠标穿过<p>元素时,会发生mouseenter事件")
})
$("p").mouseleave(function(){
console.log("当鼠标离开<p>元素时,会发生mouseenter事件")
})
键盘事件
keypress() //键被按下执行代码
keydown() //键按下的过程
keyup() //键被松开
hover() //鼠标经过事件,触发了mouseenter和mouseleave事件
$("p").hover(function(){
$("p").css("background-color","yellow"); //mouseenter事件 },
function(){ $("p").css("background-color","pink"); //mouseleave事件
});
表单事件
submit()事件
用法1:
$("#register").click(function(){
$("form").submit() //提交表单的数据
})
<form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input id="register" type="button" name="LastName" value="Mouse"><br>
</form>
用法2:
$("form").submit(function(){
alert("数据已提交")
})
<form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Lastname:
<input type="text" name="LastName" value="Mouse"><br>
<input id="register" type="submit" name="LastName" value="Mouse"><br>
</form>
change()事件
$('#username').change(function) {
console.log("当用户名改变时,打印此内容")
}
JQuery效果
hide() //隐藏
show() //显示
toggle() //显示/隐藏
JQuery HTML
捕获
text() //返回所选元素的文本内容
text("设置文本内容") //设置所选元素的文本内容
html() //设置或返回所选元素的内容(包括 HTML 标记)
val() //设置或返回表单字段的值
attr("属性名") //方法用于获取属性值
attr("属性名", "新属性值") //方法用于设置属性值
删除元素
remove() //删除被选元素(及其子元素)
empty() //从被选元素中删除子元素
添加元素
append() //在被选元素的结尾插入内容
prepend() // 在被选元素的开头插入内容
after() //在被选元素之后插入内容
before() //在被选元素之前插入内容
CSS类
addClass("类名1", "类名2") //向被选元素添加一个或多个类
removeClass("类名1", "类名2") //从被选元素删除一个或多个类
toggleClass("类名1", "类名2") // 对被选元素进行添加/删除类的切换操作
css() //设置或返回样式属性
设置单个样式属性的实例:
$("p").css("background-color","yellow");
设置多个样式属性的实例:
$("p").css({"background-color":"yellow","font-size":"200%"});
遍历—祖先
parent() //返回被选元素的直接父元素,该方法只会向上一级进行遍历
parents() //返回被选元素的所有祖先元素,一直向上直到<html>, 可以使用参数进行过滤
$(document).ready(function(){
$("span").parents("ul");
console.log("返回所有<span>元素的所有祖先,并且它是<ul>元素");
});
遍历—后代
children() //方法返回被选元素的所有直接子元素
$("div").children("p.1"); //返回类名为"1"的所有<p>元素,且它是<div>的直接子元素
find() // 方法返回被选元素的后代元素,一路向下直到最后一个后代
$("div").find("span"); //返回<div>后代的所有<span>元素
$("div").find("*"); //返回<div>的所有后代
遍历—同胞
siblings() // 方法返回被选元素的所有同胞元素
$("h2").siblings("p"); //返回<h2>的同胞元素的所有<p>元素
next() //方法返回被选元素的下一个同胞元素。
prev() //方法返回被选元素的上一个同胞元素。
遍历—过滤
first() //方法返回被选元素的首个元素。
last() //方法返回被选元素的最后一个元素。
filter() //方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
$("p").filter(".url"); //返回带有类名 "url" 的所有 <p> 元素
not() //方法与 filter() 相反。
JQuery AJAX
GET - 从指定的资源请求数据
$.get(URL, {name:'muzili'},function(data))
URL:请求的地址
{name:'muzili'}:需要请求的内容(可选的)
function(data):参数请求成功后所执行的函数,data:请求返回的数据
POST - 向指定的资源提交要处理的数据
$.post(URL, {name:'muzili'},function(data))
URL:请求的地址
{name:'muzili'}:需要请求的内容(可选的)
function(data):参数请求成功后所执行的函数,data:请求返回的数据