简单来说,jQuery是一个js库,却极大的简化了JavaScript编程。好记性不如烂笔头,mark一下自己遇到的问题

本文要点:
1.选择器
2.jQuery的事件
3.jQuery异步Ajax

1. 选择器

id选择器 $(“#div”)
类选择器 $(“.div”)
标签选择器 $(“div”)
并集选择器 $(“selector1,selector2,…,selectN”):使用逗号连接,以数组形式返回所有的合并元素
后代选择器 $(“div p”):div标签下的p标签,包含子孙节点
过滤选择器 $(“div:eq(n)”) :eq(index)获取给定索引值的元素 从0开始计数
        :gt(index) 匹配所有大于给定索引值的元素
        :lt(index) 匹配所有小于给定索引值的元素
        :even 匹配所有索引值为偶数的元素,从 0 开始计数
        :odd 匹配所有索引值为奇数的元素,从 0 开始计数
属性选择器 $(“div[attribute=”value”]”) :匹配给定的属性是某个特定值的元素

表单的选择器:$(‘input:radio/checkbox/text/password/…’),即: type值为radio、checkbox、password等的input元素

筛选选择器 : $(‘div’).eq(n) 获取第n个元素 数值从0开始
        .first()获取第一个元素
        .last()获取最后一个元素
        .parent() 选择父亲元素
        .siblings()选择兄弟元素
        .find() 查找目标元素值

PS:注意筛选选择器与过滤选择器的函数位置

2.jQuery的事件

常见的DOM事件:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

1.click鼠标点击事件:选择目标元素
1
2
3
$("p").click(function(){
// 动作触发后执行的代码!!
});

2.dblclick(),当双击元素时,会发生 dblclick 事件。

1
2
3
4
5
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:   
实例
$("p").dblclick(function(){
$(this).hide();
});

3.mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件

1
2
3
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});

4.mouseleave():当鼠标指针离开元素时,会发生 mouseleave 事件。

1
2
3
4
5
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:
实例
$("#p1").mouseleave(function(){
alert("再见,您的鼠标离开了该段落。");
});

5.mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

1
2
3
4
5
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:
实例
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下!");
});

6.hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)

1
2
3
4
5
6
7
$('p').hover(
function(){
alert('你的鼠标在段落上');
},
function(){
alert('你的鼠标已经离开了段落');
})

3.jQuery异步Ajax

3.1 jQuery $.get()方法,通过 HTTP GET 请求从服务器上请求数据。

1
2
3
4
5
6
7
8
9
10
语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});

3.2 jQuery $.post() 方法,通过 HTTP POST 请求向服务器提交数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
语法:
$.post(URL,data,callback,data_type);
url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

下面的例子使用 $.post() 连同请求一起发送数据:

$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
"name":"菜鸟教程",
"age":18,
"url":"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
},"json");

4.jQuery内容文本值

  • 获取设置元素内容 .html():获取元素html内容
  • 获取设置元素文本内容 .text(): 仅仅是获取文本内容,若存在参数,则表示将其渲染到目标元素中($(‘#box2’).text(‘路飞学城‘) 值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中)
  • 获取设置表单值 .val():仅获取到表单标签的value值
  • 获取属性值.attr(“属性名”):attr()不存在参数时,表示获取属性值;若attr()存在参数值,表示设置属性值,$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });表示为img标签赋予src属性,alt属性

 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议