JQuery
版权声明：Copyright © https://cloud.tencent.com/developer/article/1477144
JQuery
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素jq 入口函数
$(doctument).ready(function(){
})
$(function(){
})动画函数
animate参数：
参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
``` JavaScript$('#div1').animate({
width:300,height:300},1000,'swing',function(){
alert('done!');});
jQuery 属性操作
.html()
.prop()
.attr() 获取自定义标签的值,用法和prop一样
循环 each
$(function(){
$('li').each(function(event){
// each里面形参表示的是each选中的标签的索引值
// alert(event)
$(this).html(event)
})
})jquery事件
事件 | 描述 |
|---|---|
click() | 点击事件 |
blur() | 失去焦点 |
focus() | 获取焦点 |
mouseover() | 鼠标进入（进入子元素也触发） |
mouseout() | 鼠标离开（离开子元素也触发） |
mouseenter() | 鼠标进入（进入子元素不触发） |
mouseleave() | 鼠标离开（离开子元素不触发） |
hover() | 同时为mouseenter和mouseleave事件指定处理函数 |
submit() | 提交表单 |
表单验证
规则:
var re = new RegExp(‘规则’,’可选参数’)
var re =/规则/参数;
事件冒泡
作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>阻止默认行为
return falses
事件委托
用法: $(‘ul’).delegete(事件发生在哪,事件属性,匿名函数)
作用:
- 提高代码执行效率
- 给未来元素绑定命令(单纯给未来元素绑定命令 $(‘li’).on(事件属性,匿名函数))
DOM操作(节点操作)
DOM: 网页文档的根/根标签
追加节点:同级追加和自己追加(前面 后面)
步骤:
- 声明变量保存的节点数据
- 使用追加函数追加节点
子级追加:
- append()和appendTo()：在现存元素的内部，从后面放入元素
- prepend()和prependTo()：在现存元素的内部，从前面放入元素
父级追加:
- after()和insertAfter()：在现存元素的外部，从后面放入元素
- before()和insertBefore()：在现存元素的外部，从前面放入元素
删除节点:remove()或empty()
$(function(){
// 追加节点：同级追加 和 子级追加 （前面 后面）
// 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点
var $li = $('<li>2222</li>')
// ul子级追加
// $li.appendTo($('ul')) //结尾追加
// $('ul').append($li)
// $li.prependTo($('ul')) // 开头追加
// $('ul').prepend($li)
var $div = $('<div>divdiv</div>')
// $div.insertAfter($('ul'))
// $('ul').after($div)
// $div.insertBefore($('ul'))
// $('ul').before($div)
// 删除节点
// $('ul').remove()
// $('ul').empty()
})ajax和json
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。
ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
同步和异步
同步:一件事情做完再去做另一件事情
异步:同时做多件事情
.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是’GET’，常用的还有’POST’
3、dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是’true’，表示异步
以前的写法：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});
新的写法(推荐)：
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时，请重试！');
});
$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});