目录
jQuery语法
jQuery基础语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
文档就绪事件
jquery的入口函数
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript的入口函数
window.onload = function () {
// 执行代码
}
二者区别:
选择器
元素选择器:$("p")选择所有p标签
id选择器:$("#test")
类选择器:$(".test")
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |
jQuery事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click单击 | keypress | submit | load |
dblclick双击 | keydown | change | resize |
mouseenter移到元素上 | keyup | focus | scroll |
mouseleave离开 | blur | unload | |
点击事件:
$("p").click(function(){
// 动作触发后执行的代码!!
});
hover():模拟光标悬停,使用方法如下:
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
jQuery效果
隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
AJAX
$(selector).load(URL,data,callback);
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);callback参数是请求成功之后所执行的函数名
$.post() 方法通过 HTTP POST 请求向服务器提交数据
$.post(URL,data,callback);
jQuery HTML / CSS 方法
https://www.runoob.com/jquery/jquery-ref-html.html处理css的手册,经常用到