jquery介绍
jquery的优势
1.js代码对浏览器的兼容性做的更好了 2.隐式循环 3.链式操作
jquery是什么?
高度封装了js代码的模块
封装了dom节点
封装了操作dom节点的简便方法
jquery的导入
https://code.jquery.com/jquery-3.4.1.js 未压缩版 https://code.jquery.com/jquery-3.4.1.min.js 压缩版 下载:保存在本地文件里 引入:<script src="jquery3.4.1.min.js"></script>
$和jQuery的关系
$就是jQuery名字的简写,实际上是一回事儿
jquery对象和dom对象的关系和转换
jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index]
jquery选择器
基础选择器
#id选择器 .类选择器 标签选择器 *通用选择器
$('#city')
k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0)
$('.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('li')
k.fn.init(4) [li, li, li, li, prevObject: k.fn.init(1)]0: li1: li2: li3: lilength: 4prevObject: k.fn.init [document]__proto__: Object(0)
$('a')
k.fn.init(2) [a, a, prevObject: k.fn.init(1)]0: a1: alength: 2prevObject: k.fn.init [document]__proto__: Object(0)
$('*')
k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script, prevObject: k.fn.init(1)]
div.c1交集选择器 div,p并集选择器
$('div.box')
k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn.init [document]__proto__: Object(0)
$('div,p,a')
k.fn.init(4) [div.box, a, a, p, prevObject: k.fn.init(1)]
层级选择器
空格 后代选择器 >子代选择器 +毗邻选择器 ~弟弟选择器
$('div li')
$('div>ul>li')
$('.baidu+li')
k.fn.init [prevObject: k.fn.init(1)]
$('.baidu~li')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
属性选择器
$('[属性名]') 必须是含有某属性的标签
$('a[属性名]') 含有某属性的a标签
$('选择器[属性名]') 含有某属性的符合前面选择器的标签
$('选择器[属性名="aaaa"]') 属性名=aaa的符合选择器要求标签
$('选择器[属性名$="xxx"]') 属性值以xxx结尾的
$('选择器[属性名^="xxx"]') 属性值以xxx开头的
$('选择器[属性名*="xxx"]') 属性值包含xxx
$('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
jquery筛选器
基础筛选器
$('选择器:筛选器')
$('选择器:first')
作用于选择器选择出来的结果
first 找第一个
last 最后一个
eq(index) 通过索引找
even 找偶数索引
odd 找奇数索引
gt(index) 大于某索引的
lt(index) 小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
type筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的
状态筛选器
enabled
disabled
checked
selected
$(':disabled')
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]
$(':enabled')
jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('input:checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
jquery的筛选器方法
找兄弟 :$('ul p').siblings()
找哥哥
$('ul p').prev() 找上一个哥哥
$('ul p').prevAll() 找所有哥哥
$('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了
找弟弟 : next() nextAll() nextUntil('选择器')
找祖宗 : parent() parents() parentsUntil('选择器')
找儿子 : children()
筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器 找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
补充内容
// 1.不要用for(i in li_list){}的方式循环一个jq对象
for(let i=0;i<li_list.length;i++){ //let 声明的变量的作用域只在for循环中
console.log(i)
}
jquery介绍
引入:
<script src='路径'></script>
jquery是一个对js操作dom对象进行了高度封装的库
查找标签\操作标签(操作属性\文本)
jQuery的本质就是一个类,简写就是$
如何创建jquery对象 :
$('选择器')
$(dom对象)
使用 :
对象.方法名
对象.属性
jq->dom
jq[index]
dom->jq
$(dom对象)
查找标签
选择器
基础选择器 : # . 标签名 * div.c1交集 div,p并集
层级选择器 : 空格(后代) >(子代) +(毗邻) ~(弟弟)
属性选择器 : [属性名] [属性名="属性值"] [属性名^="开头"] [属性名$="结尾"] [属性名*="包含"]
[属性名!="不等于"]
筛选器
基础筛选器 :first last eq(index) even(偶数) odd(奇数) gt(index)大于 lt(index)小于
not('选择器')不等于 has('选择器')如果有后代满足选择器要求就把当代选出来
表单筛选器 :text password radio checkbox file reset submit button
checked selected disabled enabled
筛选器方法
兄弟: siblings()
找弟弟:next(),nextAll(),nextUntil('选择器')
找哥哥:prev(),prevAll(),prevUntil('选择器')
找祖辈:parent(),parents(),parentsUntil('选择器')
找儿子:children()
筛选 :first() last() eq(index)
not('选择器')
filter('交集')
find('后代')
has('拥有后代的当代')
事件的绑定
jquery操作标签
操作文本 : <>文本内容<>
操作标签 : 添加 删除 修改 克隆
操作属性 : 通用属性 类 css样式 value 盒子模型 滚动条
事件的绑定
<body>
<button>点击1</button>
<button>点击2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你点了我一下!')
}
)
</script>
标签的文本操作
text()
$('li:first').text() // 获取值
$('li:first').text('wahaha') // 设置值
$('li:last').html() // 获取值
$('li:last').html('qqxing') // 设置值
$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>') //a标签
var a = document.createElement('a')
a.innerText = '我是AD钙'
$('li:last').html(a) //a 是dom对象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj) //jqobj是jquery对象
标签的操作
增加
父子关系:
追加儿子 :(父).append(子) (子).appendTo(父)
头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点)
添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动
例子append
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq[0])
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append('<li>鹿晗</li>')
例子appendTo
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo('ul')
var dom_ul = document.getElementsByTagName('ul')[0]
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo(dom_ul)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo($('ul'))
对已经存在的内容进行添加 -- 移动
$('li:first').appendTo('ul')
$('li:last').prependTo('ul')
$('ul').prepend('<li>李东宇</li>')
$('<li>邓帅</li>').prependTo('ul')
$('#l2').before('<li>李东宇</li>')
$('<li>李东宇222</li>').insertBefore('#l2')
$('#l2').after('<li>邓帅</li>')
$('<li>邓帅222</li>').insertAfter('#l2')
删除 修改 克隆
删除 : remove detach empty
remove : 删除标签和事件,被删掉的对象做返回值
detach : 删除标签,保留事件,被删掉的对象做返回值
empty : 清空内容标签,自己被保留
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替换a
replaceAll : a.replaceAll(b) 用a替换b
复制 : clone
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
var obj = $('button').remove()
obj是button标签,但是事件已经被删除了
var a = document.createElement('a')
a.innerText = 'wahaha'
$(a).replaceAll('p')
$('p').replaceWith(a)
标签的属性操作
通用属性
attr
获取属性的值
$('a').attr('href')
设置/修改属性的值
$('a').attr('href','http://www.baidu.com')
设置多个属性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})
removeAttr
$('a').removeAttr('title') //删除title属性
如果一个标签只有true和false两种情况,适合用prop处理
$(':checkbox:checked').prop('checked') //获取值
$(':checkbox:checked').prop('checked',false) //表示取消选中
如果设置/获取的结果是true表示选中,false表示取消选中
类的操作
添加类 addClass
$('div').addClass('red') //添加一个类
$('div').addClass('red bigger') //添加多个类
删除类 removeClass
$('div').removeClass('bigger') //删除一个类
$('div').removeClass('red bigger')
转换类 toggleClass //有即删 无即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
value值的操作
$(input).val()
$(':text').val('值')
$(':password').val('值')
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
css样式
css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
滚动条
scrollTop() scrollLeft() $(window).scrollLeft() $(window).scrollTop()
盒子模型
内容宽高 : width和height 内容+padding : innerWidth和innerHeight 内容+padding+border :outerWidth和outerHeight 内容+padding+border+margin : outerWidth(true)和outerHeight(true) 设置值:变得永远是content的值
表单操作
$(':submit').click(
function () {
return false
}
)
如果返回false不提交
如果返回true不提交
内容回顾
标签的文本操作
jq对象.text('想添加的内容')
jq对象.html('<a></a>') # 参数可以是dom对象或者jq对象
标签的操作
增
父子关系:父节点添加子节点
父节点.append(子节点)
子节点.appendTo(父节点)
父节点.prepend(子节点)
子节点.prependTo(父节点)
兄弟关系:加到之前或者之后
哥哥.after('要添加的弟弟节点')
$('要添加的弟弟节点').insertAfter(哥哥)
弟弟.before('要添加的哥哥节点')
$('要添加的哥哥节点').insertBefore(弟弟)
删
remove : 删除所有,返回被删除的标签,标签原本的事件被清除 detach : 删除标签,返回被删除的标签保留事件 empty : 清空标签的内容\子元素
改
要被改的.replaceWith(新) 新的.replaceAll(旧的)
克隆
clone() 不拷贝事件 clone(true) 拷贝事件
标签的属性操作
通用属性
attr
attr('属性名') 获取属性值
attr('属性名','属性值') 设置一个属性
attr({'属性名':'属性值'....}) 设置多个属性
removeAttr
removeAttr('属性名') 删除某个属性
prop
针对true/false两种值的
checkbox redio
css
dom.style.color = 'red';
$(obj).css('color','red')
$(obj).css({'color':'red',....})
类操作
addClass('box c1')
removeClass('box')
toggleClass('box')
val
$对象.val() 获取值 针对表单内的元素
val('内容') 设置值 针对表单内非选择框
val([1]) 设置值 针对表单内的选择框
盒子样式
width \ height 内容宽高 innerWidth \ innerHeight 内容+padding宽高 outerWidth \ outerHeight 内容+padding+border宽高 outerWidth(true) \ outerHeight(true) 包括margin宽高
滚动条
scrollTop 垂直滚动条距离顶部的距离 scrollLeft 水平滚动条距离左侧的距离
表单
给submit绑定事件 如果对应的函数返回值是false,表单就不提交了
动画
show系列
show hide toggle
slide滑动系列
slideUp slideDown slideToggle(时间,回调函数)
fade淡入淡出系列
fadeOut fadeIn fadeToggle
动画的停止
stop 永远在动画开始之前,停止动画
事件
事件绑定
// bind 参数都是选传的,接收参数e.data
$('button').bind('click',{'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').bind('click',fn)
function fn(e) {
console.log('wahaha')
}
// 简写的事件名称当做方法名
$('button').click({'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').click(fn)
function fn(e) {
console.log('wahaha')
}
解除绑定
$('button').unbind('click')
各种事件
click(function(){...}) // 单机事件
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // input框鼠标离开时内容改变触发
keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
事件冒泡
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
$('.outer').click(
function () {
alert('outer')
}
)
$('.inner').click(
function (e) {
alert('inner')
// e.stopPropagation() //阻止事件冒泡方法1
return false //阻止事件冒泡方法2
}
)
</script>
事件委托
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不许点')
})
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件
页面的加载
document.onload = function(){
//js 代码
}
window.onload = function () {
$('button').click(function () {
alert('不许点')
})
}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次
//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
function () {
//文档加在完毕之后能做的事情
})
//jquery的方式(简写)*****
$(function () {
//文档加在完毕之后能做的事情
})
//示例
$(function () {
$('button').click(function () {
alert('不许点')
})
})
//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
function () {
alert('123')
})