https://www.jquery123.com/category/attributes/ 详细文档
http://hemin.cn/jq/ 使用提示
jquery是对js的高级封装，使得用户对js的操作更简单，更丰富和清晰，jquery的绝大多数api是围绕操作DOM来制定的，因此学习找到dom是我们的第一步操作。
什么是DOM？
DOM是Document Object Model（文档对象模型）的缩写。
DOM的基本组成是节点：
节点本身分为：元素节点，属性节点，文本节点
1.元素节点：每一个标签 element对象
2.属性节点：标签上的属性 attributes
3.文本节点：标签中的内容 innerText
元素：元素包含了以上全部节点的特点
元素与元素之间的关系：
父关系：parentElement，parentNode
子关系：childNodes，children，lastChild，lastElementChild，firstChild，firstElementChild
兄弟关系：nextSibling，nextElementSibling，previousSibling，previousElementSibling
打印DOM对象
let el = document.getElementsByTagName('div');
console.log([el[0]]);
DOM查询
首先是元素的查询：
原生js当中，将查询语法分为很多种，其中包括了：
通过id查找，class查找，标签查找，属性查找，
id查找：$('#id')
class查找：$('.class')
标签查找：$('')
在jquery中还添加类似css中的选择器：
image.png
DOM的筛选
在查找到class或者tag后，将有可能会找到多个元素,直接添加内容，默认会为所有元素添加内容，因此我们可以进行内容的筛选，比较常用的有：
eq
DOM创建
同样使用$符号，就可以创建一段html
$("<div><p>Hello</p></div>")
DOM节点的增删改查
文本/元素节点：
查询
查询元素：.html()
查询文本节点: .text()
修改
增加元素：.html(el)
增加文本节点：.text(text)
属性节点：
查询
attr(name|pro|key,val|fn)
prop(n|p|k,v|f)
删除
removeAttr(name)
removeProp(name)
DOM内容的增删改查
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)
外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)
包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
replaceAll(selector)
删除
empty()
remove([expr]
detach([expr])
复制
clone([Even[,deepEven]])
事件
.father {
width: 500px;
height: 500px;
position: relative;
background: red;
}
.son {
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 300px;
height: 300px;
background: burlywood;
}
冒泡：点击子元素的事件会触发父元素的事件
image.png
阻止冒泡:
$('.son').on('click', function (event) {
event.stopPropagation();
alert(222)
})
事件代理
通过冒泡机制和判断机制，能够为动态模块添加事件处理
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script>function handler(event) {
var $target = $(event.target);
if( $target.is("li") ) {
$target.children().toggle();
}
}
$("ul").click(handler).find("ul").hide();
</script>
事件对象
所有事件都有回调对象，event
event可以获取到触发事件的相关属性
ajax
基础用法
$('#save').on('click',function(){
$.ajax({
type:'GET',
url:'http://localhost:8081/test',
data:$('form:first').serializeArray(),
success:function(res){
console.log(res)
},error: function () {
console.log('error')
}
})
})
逻辑不够清晰，改良版
var ajax = $.ajax('data.json')
ajax.done(function () {
console.log('success 1')
})
.fail(function () {
console.log('error')
})
最新的方法
var ajax = $.ajax('data.json')
ajax.then(function () {
console.log('success 1')
}, function () {
console.log('error 1')
})
回调地狱
假设有10个ajax互相依赖，并且每个ajax的执行都依赖上一个ajax怎么办？
使用jquery中的$.Deferred对象
var task1 = function(){
var $d = $.Deferred();
setTimeout(function(){
console.log('t1');
$d.resolve();
},1000);
return $d.promise();
}
//2
var task2 = function(){
var $d = $.Deferred();
setTimeout(function(){
console.log('t2');
$d.resolve();
},1200);
return $d.promise();
}
//3
var task3 = function(){
var $d = $.Deferred();
setTimeout(function(){
console.log('t3');
$d.resolve();
},1200);
return $d.promise();
}
//4
var task4 = function(){
var $d = $.Deferred();
setTimeout(function(){
console.log('t4');
$d.resolve();
},1200);
return $d.promise();
}
task1().then(function(){
return task2()
}).then(function(){
return task3()
}).then(function(){
return task4()
}).then(function(){
console.log('ok');
})Ï
网友评论