官网:http://jquery.com
标语:write less do more
拆分:js+query(查询)
jQuery is a fast, small, and feature-rich JavaScript library.
Jquery是一个快速的轻量的功能丰富的JS库。满足了各种浏览器的兼容问题。
功能: 元素的查找与遍历、元素的操作、CSS操作、元素事件、JS动画。
解决web2.0之后的交互问题。
使用感受:简单简洁、链式调用、读写一体
使用思路: 查找+操作
版本问题:1.x IE6+ 2.x IE9+ 3.x IE10+
与onload()相比,入口函数不会等待图片的加载,只等待Dom文档加载完成后执行。
$(参数)
调用 $ 函数进行查询,参数是一个字符串,CSS选择器
过滤选择器:
:first 选择列表第一个
:last 选择列表最后一个
:even 选择列表的偶数
:odd 选择列表的奇数
:eq(1)选择列表下表标等于1的项
:gt(2)选择列表下标大于2的项
:lt(3) 选择列表下标小于3的项
表单属性选择器:
表单类型 :input :text :password
表单状态 :checked :enabled :disabled :selected
选择器方法:
children() 选择当前节点的孩子 可传参
siblings() 选择当前节点兄弟
find() 选择当前节点的后代 必传参数
next() 选择当前节点的下一个兄弟
prev() 选择当前节点的上一个兄弟
eq() 选择列表下标为x
jquery对象 | js对象 |
---|---|
使用jquery方法获取的对象 | js原生的方法获取的对象 |
不能直接用原生方法 | 不能调jquer方法 |
自带遍历功能,事件可叠加 | 需要遍历、事件会覆盖 |
jquery对象是Js对象的集合 ,他是一个伪数组,里边返回js对象的集合
转换:
联系:JQuery对象是JS对象的集合,他是一个数组,数组的每一项就是原生的JS对象。
$(选择器字符串) 查找DOM
$(函数) 入口函数
$(对象) 转换成JQuery对象
DOM查询部分代码示例:./src/dom查询.html
.r{
border: 3px solid red;
}
.g{
border: 3px solid green;
}
.b{
border: 3px solid blue;
}
<div class="div0">123div>
<div class="div1">
<ul id="myul">
<li class="li1" name="ulli1">1li>
<li class="li2" name="numli">2li>
<li class="li3" name="li-num">3li>
<li class="li4">4li>
<li class="li5">5li>
<li class="li6">
<ul >
<li class="li6">内部li>
ul>
li>
ul>
<button id="btn1">1button>
<button id="btn2">2button>
<button id="btn3">3button>
<button id="btn4">4button>
div>
$(function(){
// 1、基础选择器
$('*').css({color:'red'});
$('div').toggleClass('r');
$('.div1').toggleClass('b')
$('#myul').toggleClass('b')
// 2、属性选择器
$("li[name='ulli1']").toggleClass('b');
$("li[name^='ul']").toggleClass('b');
$("li[name$='li1']").toggleClass('b');
$("li[name*='li']").toggleClass('b');
$("li[name~='li']").toggleClass('b');
$("li[name|='li']").toggleClass('b'); // |必须是连字符的形式
// 3、关系选择器
$('div ul').toggleClass('g')
$('div>ul').toggleClass('r')
$('div.div1').toggleClass('b')
$('.div1,.div0').toggleClass('b')
//4、jquery 新增的选择器
4.1 过滤类型
$('li:first').toggleClass('r');
$('#myul>li:last').toggleClass('r');
$('#myul>li:even').toggleClass('r');
$('#myul>li:odd').toggleClass('r');
$('#myul>li:eq(1)').toggleClass('r');
$('#myul>li:gt(1)').toggleClass('r');
$('#myul>li:lt(1)').toggleClass('r');
// 4.2 选择器的方法
childern 和find 都是基于父元素查找子元素
$('#myul').children().toggleClass('r');
$('.li1').siblings().toggleClass('r');
$('.li1').next().toggleClass('r');
$('.li3').prev().toggleClass('r');
$('.li3').nextAll().toggleClass('g');
$('.li3').prevAll().toggleClass('r');
$('#myul').find('.li1').toggleClass('r');
// 比较两种对象 JS 和 JQ对象
const jsbtn = document.getElementById('btn1')
const jqbtn = $('#btn1')
console.log('js对象',document.getElementById('btn1'))
console.log('jquery对象',$('#btn1'))
console.log(jsbtn === jqbtn[0])
// Jquery 事件可以叠加,而js事件会覆盖
function click1(){
console.log('c 1')
}
function click2(){
console.log('c 2')
}
// js
jsbtn.onclick = click1;
jsbtn.onclick = click2;
// jq
jqbtn.click(click1)
jqbtn.click(click2)
})
读写一体 不穿参数就是获取值 传参数就会设置值
val() 获取表单值
html() 获取内部html
text() 获取内部文本 写时可传字符串/返回新内容的回调函数
width() 获取宽度
height() 获取高度
innerwidth() 获取 padding+width
outerwidth() 获取 border+padding+width
attr() 获取属性
addClass() 添加类
removeClass() 删除类
toggleClass() 切换类
hasClass() 判断类是否存在
// 添加
A.append(B) 把B添加加到A的最后一个子元素
A.prepend(B) 把B添加到A第一个子元素
A.before(B) //把B添加到A之前
A.after(B) //把B添加到A之后
// 删除
A.remove() // 删除元素A
A.empty() // 清空A的子元素
DOM操作部分代码示例:./src/dom操作.html
.mytext{
width: 300px;
height: 300px;
padding: 50px;
border: 10px solid red;
}
.red{
color: red;
}
.blue{
color: blue;
}
<div class="mytext" name="12">
jquery挺简单的~
<span>是的span>
div>
<button id="btn">删除button>
$(function(){
1、属性的操作与获取
console.log($('.mytext').text())
console.log($('.mytext').html('12341'))
console.log($('.mytext').width(500))
console.log($('.mytext').height())
console.log($('.mytext').innerWidth()) // width + padding
console.log($('.mytext').outerWidth()) // width + padding + border
console.log($('.mytext').innerHeight()) // height + padding
console.log($('.mytext').outerHeight()) // height + padding + border
console.log($('.mytext').attr('name',9))
2、class操作
$('.mytext').addClass('red');
$('.mytext').removeClass('red');
$('.mytext').toggleClass('blue')
console.log($('.mytext').hasClass('red'))
3、DOM节点的操作
添加
$('.mytext').append('家啊还是个
');
$('.mytext').prepend('开始
');
$('span').before('span前边
')
$('span').after('span后边
')
删除
$('#btn').click(function(){
$('.mytext').remove(); // 当前dom全部删除
$('.mytext').empty(); // 清空子元素,并不删除DOM本身
})
})
<button id='btn'>点击button>
<button id='btn1'>测试button>
<button id='btn2'>绑定button>
<button id='btn3'>解绑button>
<button id='btn4'>部分解绑button>
<hr>
<div class="out">
<div class="in">
123123
div>
div>
点击事件:click()
双击:doubleclick()
鼠标进入:mouseenter()
鼠标离开:mouseleave()
$('#btn').click(function(){ //点击事件
console.log('click')
})
$('#btn').dblclick(function(){ // 双击事件
console.log('dblclick')
})
$('#btn').mouseenter(function(){//鼠标进入
console.log('mouseenter')
})
$('#btn').mouseleave(function(){ // 鼠标离开
console.log('mouseleave')
})
绑定:bind() on()
解绑: unbind(事件名称,解绑事件) 只传事件名称全部解绑 off()
function click1(){
console.log('click 1');
}
function click2(){
console.log('click 2');
}
bind()和unbind():
// bind/unbind
$('#btn2').click(function(){
$('#btn1').bind('click',click1);
$('#btn1').bind('click',click2);
})
$('#btn3').click(function(){
$('#btn1').unbind('click'); //全部解绑
})
$('#btn4').click(function(){
$('#btn1').unbind('click',click1); //部分解绑
})
on()和off():
// on/off
$('#btn2').click(function(){
$('#btn1').on('click',click1);
$('#btn1').on('click',click2);
})
$('#btn3').click(function(){
$('#btn1').off('click'); //全部解绑
})
$('#btn4').click(function(){
$('#btn1').off('click',click1); //部分解绑
})
e.stopPropagation(); // 阻止父元素事件
e.stopImmediatePropagation(); // 阻止全部事件
// 3、阻止冒泡
function outClick1(){
console.log('out click 1');
}
function outClick2(){
console.log('out click 2');
}
function inClick1(e){
// e.stopPropagation(); // 阻止向父元素继续冒泡
e.stopImmediatePropagation(); // 阻止向后继续冒泡
console.log('in click 1');
}
function inClick2(){
console.log('in click 2');
}
$('.out').on('click',outClick1)
$('.out').on('click',outClick2)
$('.in').on('click',inClick1)
$('.in').on('click',inClick2)
显示与隐藏 show() hide()
滑入与滑出 slideDown() slideUp()
淡入与淡出 fadeIn() fadeOut() fadeTo()
动画部分代码示例 ./src/动画.html
.div1{
width: 500px;
height: 500px;
background-color: green;
}
<div class="div1">div>
<button id="btn1">显示button>
<button id="btn2">隐藏button>
<button id="btn3">显示/隐藏button>
<button id="btn4">滑入button>
<button id="btn5">滑出button>
<button id="btn6">滑入与滑出button>
<button id="btn7">淡入button>
<button id="btn8">淡出button>
<button id="btn9">淡入与淡出button>
$(function(){
// 参数:不传参数 没有动画
// 一个参数 字符串:normal/fast/slow 数字类型:表示时间
//显示与隐藏 show() hide()
$('#btn1').click(function(){
$('.div1').show(2000,function(){
console.log('执行完了')
})
})
$('#btn2').click(function(){
$('.div1').hide(3000)
})
$('#btn3').click(function(){
$('.div1').toggle()
})
// 滑入与滑出 slideDown() slideUp()
$('#btn4').click(function(){
$('.div1').slideDown('slow')
})
$('#btn5').click(function(){
$('.div1').slideUp('fast')
})
$('#btn6').click(function(){
$('.div1').slideToggle()
})
// 淡入与淡出 fadeIn() fadeOut() fadeTo()
$('#btn7').click(function(){
$('.div1').fadeIn()
})
$('#btn8').click(function(){
$('.div1').fadeOut()
})
$('#btn9').click(function(){
$('.div1').fadeTo(2000,0.5);
})
})
子孙节点: children() find()
祖先节点: parent() parents() parentUntil()
同级节点:slibilings() next() nextAll() nextUntil() prev() prevAll() prevUntil()
过滤:first() last() eq() filter() not()
代码示例 ./src/dom遍历.html
.r{
border: 3px solid red;
}
<div>
<h1 class="h1">h1h1>
<span class="span">spanspan>
<ul>
<li class="li1">1li>
<li class="li2">2li>
<li id="li" class="li3">3li>
<li class="li4">4li>
<li class="li5">5li>
<li class="li6">
<ul>
<li class="li1">nei1li>
<li>nei2li>
<li>nei3li>
ul>
li>
ul>
<p class="p">pp>
div>
$(function(){
1、遍历子孙节点 childern() find()
$('ul').children('span').addClass('r') // 查找符合某种选择器的孩子节点 参数选填
$('ul').find('span').addClass('r') // 查找符合某种选择器的孩子节点 参数必填
2、遍历祖先节点 parent() parents() parentUntil()
$('.spanli').parent().addClass('r');
$('.spanli').parents().addClass('r');
$('.spanli').parentsUntil('div').addClass('r'); // 给一个查找的范围 直到找到DIV停止,不包括DIv
3、遍历同级节点 sliblings() next() nextUntil() nextAll() prev() prevUntil() prevUntil()
$('.li1').siblings().addClass('r');
$('.li1').next().addClass('r');
$('.li1').nextAll().addClass('r');
$('.li1').nextUntil('.li5').addClass('r');
$('.li3').prev().addClass('r');
$('.li3').prevAll().addClass('r');
$('.li3').prevUntil('.li1').addClass('r');
4、过滤 first() last() eq() filter() not()
对应到js arr[0] arr[length-1] arr[index] arr.filter()
数组问题
Jquery对象一直都是数组 内部的处理都会考虑到数据的形式,且是对数组做遍历之后对每一项执行操作。
const lis = $('.li1')
const lisS = lis.siblings()//兄弟节点
console.log(lis,lisS)
lisS.addClass('r');
})
$.get('地址','数据',function (res) {})
$.post('地址','数据',function (res) {})
<input id="input" />
<button>提交button>
<hr>
post结果:<span class="pres">span>
<hr>
get结果:<span class="gres">span>
$(function(){
$('button').click(function(){
$.get('http://127.0.0.1:8080',{value:$('input').val()},function(res){
$('.gres').html(res)
});
$.post('http://127.0.0.1:8081',$('input').val(),function(res){
$('.pres').html(res)
})
})
})
</script>