Jquery学习笔记

 

目录

jQuery语法

jQuery基础语法

文档就绪事件

选择器

jQuery事件

jQuery效果

隐藏和显示

AJAX

jQuery HTML / CSS 方法

---

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
hover

点击事件：

$("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的手册，经常用到