jQuery-1.基础.md

jQuery

jQuery学习中文文档

jQuery官网

jQuery是一个快速,小巧,功能丰富的javascript库,可以通过jQuery来更加方便处理HTML document操作,事件绑定,实现动态效果。

jQuery文档很全面,想详细,提供很多成熟插件。

jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果对象是jQuery对象,它就可以使用jQuery方法

获取JQuery对象,实现需要引入jQuery库文件,在变量前加$就能获取

jQuery引入

jQuery引入方式有两种方式,

  1. 事先下载jquery库,下载本地后在引入:

<script scr="jquery-3.3.1.js"></script>

  1. 直接使用CDN方式:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

jQuery示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery和javascript操作DOM对象:

jQuery获取id为test中的html代码
$("#test").html()

JavaScript获取id为test中的html代码
document.getElementById("test").innerHTML

jQuery
1. jQuery极大的简化了JavaScript代码,
2. jQuery对象是包装DOM对象后产生的。
3. jQuery无法使用DOM对象操作任何方法,DOM对象也不能使用jQuery方法

实例:
var $variable 表示创建jQuery对象
var variable 表示创建DOM对象
$variable[0] jQuery转换DOM对象,
$('#msg').html() jQuery对象
$('$msg)[0].innerHTML jQuery转换DOM对象

jQuery语法$(select).action()

jQuery查询元素

选择器
1
2
3
4
5
6
7
$("*")      查找所有
$("#id") 查找id为
$(".class") 查找class
$("ele") 查找标签

#可以混合查找
$(".class,ele") 查找class和ele标签
层级选择器
1
2
3
4
$(".outer div")	后代div标签
$(".outer>div") 子代div标签
$(".outer+div") 毗邻div标签,向下查找
$(".outer~div") 兄弟div标签,向上查找
属性选择器
1
2
$('[id="div1"]')    id为idv1的选择
$('["zhuxy"="shuaige"][id="id1"]') 双重属性选择
表单选择器
1
2
$("[type='text’]")  ---->(":text")  
只适用于input标签: $("input:checked")

jQuery筛选元素

过滤筛选器
1
2
3
4
$("li:first")    获取li标签第一个
$("li:eq(2)") 获取li标签为2的
$("li:even") 获取li标签为偶数 odd是奇数,(even和odd注意的是显示是奇数,取值是偶数)
$("li:gt(1)") 获取li标签大于1的
查找筛选器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("div").children("test") 查找子代
$("div").find("test") 查找所有包含子代孙子代

向下查找
$(".class").next() 查找下一个标签
$(".class").nextAll() 向下查找所有标签
$(".test").nextUntil()
$("li").nextUntil("#end") 查找下一个标签,直到id为end前结束(不包含end)

向上查找
$("div").prev() 查找上一个元素
$("div").prevAll() 查找向上所有元素
$("div").prevUntil() 类似nextUntil("#end")
$("li").eq(3).pervUntil('li:eq(3)')

父标签查找
$(".test").parent() 如果在子元素查找查找父标签下所有元素,包含自己
$(".test").parents() 如果在子元素查找,查找所有父标签所有元素
$(".test").parentUntil()类似nextUntil("#end")

兄弟标签查找
$("div").siblings() 查找兄弟标签,除了自己

jQuery操作元素

操作属性
1
2
3
4
5
6
$("div").attr("con");   取值,返回值,或者设值
$("").removeAttr(); 删除属性
$("").prop(); 取值,返回布尔值。或者设值
$("").removeProp(); 删除属性

如果是自定义属性用attr,如果是共有属性使用prop,如果获取布尔值用prop()
class类操作
1
2
$("").addClass(class|fn)       增加class
$("").removeClass([class|fn]) 删除class
html/文本/值操作
1
2
3
$("").html([val|fn])    获取html文档
$("").text([val|fn]) 获取text文档
$("").val([val|fn|arr]) 获取value值
css操作
1
2
$("").css("color","red")
$("").css({"color":"red","font-size":"50px",...})
jQuery其他操作
位置
1
2
3
4
$("").offset([coordinates])  偏移量,根据视口的偏移量
$("").position() 同上,不过是根据父盒子的偏移量
$("").scrollTop([val]) 上下滑轮 scrollTop(0) 返回顶部0的位置 window.onscroll 滑轮
$("").scrollLeft([val]) 左右滑轮
尺寸
1
2
3
4
5
6
7
8
9
10
$("").height([val|fn])            内容高度
$("").width([val|fn]) 内容宽度
$("").innerHeight([val|fn]) 内容高度,包含padding
$("").innerWidth([val|fn]) 内容宽度,包含padding
$("").outerHeight([val|fn]) 内容高度,包含padding和border
$("").outerWidth([val|fn]) 内容宽度,包含padding和border

# 如何获取margin?
$("").outerHeight(ture) 内容高度,包含padding和border和margin
$("").outerWidth(ture) 内容宽度,包含padding和border和margin

jQuery文档处理

创建标签对象
1
$('<p>')
内部插入
1
2
3
4
$("").append(content|fn)    示例:$("p").append("<b>hello</b>")  在p标签内后添加hello
$("").appendTo(content) 示例:$("p").appendTo("#foo") 将p标签添加在id为foo下
$("").prepend(content|fn) 示例:$("p").prepend("<b>hello</b>") 在p标签内前添加hello
$("").prependTo(content) 示例:$("p").prependTo("#foo") 将p标签添加在id为foo前
外部添加
1
2
3
4
$("").after(content|fn)     示例:$("p").after("<b>hello</b>")        #在<p>标签之后添加
$("").before(content|fn) 示例:$("p").before("<b>"hello</b>") #在<p>标签之前添加
$("").insertAfter(conter) 示例:$("#foo").insertAfter("p") #儿-->父
$("").insertBefore(conter) 示例:$("#foo").insertBefore("p") #儿-->父
替换,删除,复制
1
2
3
4
5
6
7
8
9
替换
$("").replaceWith(content|fn) 示例:$("p").replaceWith('<b>new hello</b>')

删除
$("").empty()
$("").remove([expr])

复制
$("p").clone([Event[,deepEven])

jQuery事件

事件绑定
1
2
3
4
5
6
7
8
9
$("").bind('click',function(){
function body;
})

或者

$("").click(function(){
function body;
})
解除绑定
1
$("").unbind('click')
事件委托
1
2
3
4
5
6
7
8
9
$("").on(env,selector,function(){
function boduy;
})
env事件,selector委托事件

$("ul").on("click","li",function(){
function body;
})
#为ul绑定click事件,委托给li,ul绑定的事件都给li
回调函数
1
2
3
4
5
6
7
实例:
function fn1(){
$("div").hide(1000,function(){
alert('隐藏完成')
})
}
fn1执行完了执行alert
页面载入
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
function body;
})

或者
$(function(){
function body
})

类似javascript中
windows.onload function(){
function bidy;
}

jQuery动画效果

显示,隐藏,切换
1
2
3
4
5
6
7
8
9
10
11
显示
$("").show()
$("").show(1000) show后面跟时间,单位毫秒

隐藏
$("").hide()
$("").hide(1000)

显隐切换
$("").toggle() 就是两个方法一个show和hide,如果是show切换就是hide
$("").toggle(1000)
上,下,切换滑动
1
2
3
$("").slideUp()
$("").slideDown()
$("").slideToggle()
淡入,淡出,切换
1
2
3
4
5
6
$("").fadeIn()
$("").fadeOut()
$("").fadeToggle()

$("").fadeTo(ms,透明度)
$("").fadeTo(2000,0.7) 两秒内透明图为0.7

jQuery插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
$.extend(object) 为jQuery添加一个方法
$.fn.extend(object) 为jQuery实例添加一个方法
</script>



示例:
<script>
$.extend(object);
$.fn.extend(object);
$.extend({
myPrint: funtion() {console.log('hello world')},
maX: function(a,b) {return a>b?a:b}
});
$.myPrint()
$.fn.extend({
"Print":function(){
for(var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});

$("p").Print();
</script>

jQuery Ajax

在JavaScript可以通过XMLHttpRequest 对象来处理与后端服务器异步请求,在jQuery也有自己的Ajax方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--示例-->
<html>
<p id="user">请输入用户名<input type="text"></p>
<p id="passwd">请输入密码<input type="password"></p>
<button type="button" class="btn btn-primary" id="btnsave">提交</button>
</html>
<script>
$("#btnsave").click(function(){
var user = $("#user").text;
var passwd = $("#passwd").text;
$.ajax({
url:'/url',
type:'POST',
data:{user:user,passwd:passwd},
dataType: 'json',
success: function(arg){
var dict = JSON.parse(arg);
console.log(arg);
}
})
})
</script>
看完了?赏个鸡腿钱,谢谢老板!