jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
实例
<!--使用原生DOM-->
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById('btn1')
btn1.onclick = function () {
var username = document.getElementById('username').value
alert(username)
}
}
//绑定文档加载完成的监听
jQuery(function () {
var $btn2 = $('#btn2')
$btn2.click(function () { // 给btn2绑定点击监听
var username = $('#username').val()
alert(username)
})
})
<!--本地引入-->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<!--远程引入-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
网址:https://www.bootcss.com/
简称: jQuery函数($/jQuery)
jQuery库向外直接暴露的就是$/jQuery
//大致源码
(function (window) {
var jQuery = function () {
return new xxx()
}
window.$ = window.jQuery = jQuery
})(window)
引入jQuery库后, 直接使用$即可
jQuery函数: 直接可用, $(xxx)
当DOM加载完成后,执行此回调函数
$(function(){})
查找所有匹配的标签, 并将它们封装成jQuery对象
$('#btn')
将dom对象封装成jQuery对象
$(this)
创建标签对象并封装成jQuery对象
$('
')
var arr = [2, 4, 7]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log(index, item)
})
// 2). $.trim() : 去除两端的空格
var str = ' zichao '
console.log('---'+$.trim(str)+'---')
简称: jQuery对象
得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
使用jQuery对象: $obj.xxx()
jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
var $buttons = $('button')
/*size()/length: 包含的DOM元素个数*/
console.log($buttons.size(), $buttons.length)
/*[index]/get(index): 得到对应位置的DOM元素*/
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
$buttons.each(function (index, domEle) {
console.log(index, domEle.innerHTML, this)
})
console.log($('#btn3').index())
有特定格式的字符串,用来查找特定页面元素
//选择id为div1的元素
$('#div1').css('background', 'red')
//选择所有的div元素
$('div').css('background', 'red')
//选择所有class属性为box的元素
$('.box').css('background', 'red')
//匹配所有元素
$('*').css('background', 'red')
//选择所有class属性为box的div元素
$('div.box').css('background', 'red')
//选择所有的div和span元素
$('div,span').css('background', 'red')
在给定的祖先元素下匹配所有的后代元素
//选中ul下所有的的span
$('ul span').css('background', 'red')
在给定的父元素下匹配所有的子元素
//选中ul下所有的子元素span
$('ul>span').css('background', 'red')
匹配所有紧接在 prev 元素后的 next 元素
//选中class为box的下一个li
$('.box+li').css('background', 'red')
匹配 prev 元素之后的所有 siblings 元素
//选中class为box的元素后面的所有兄弟元素
$('.box~*').css('background', 'red')
//选择第一个div
$('div:first').css('background', 'red')
//选择最后一个class为box的元素
$('.box:last').css('background', 'red')
//选择所有class属性不为box的div
$('div:not(.box)').css('background', 'red')
//匹配所有索引值为偶数的元素,从 0 开始计数
$("tr:even")
//匹配所有索引值为奇数的元素,从 0 开始计数
$("tr:odd")
//匹配一个给定索引值的元素,从 0 开始计数
$("tr:eq(1)")
//匹配所有大于给定索引值的元素
$("tr:gt(0)")
//匹配所有小于给定索引值的元素
$("tr:lt(2)")
//可以结合使用
//匹配所有正在执行动画效果的元素
$("div:not(:animated)")
//匹配包含给定文本的元素
$("div:contains('zichao')")
//匹配所有不可见元素
$("tr:hidden")
//匹配所有的可见元素
$("tr:visible")
$("div[id]")
//属性等于一个值
$("input[name='newsletter']")
//还有不等于,复合属性等
$("ul li:first-child")
$("ul li:last-child")
$("ul li:nth-child(2)")
//索引从1开始
$("ul li:only-child")
$(":input")
$(":text")
在这里插入代码片
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
$("tr:hidden")
$("input:enabled")
$("input:disabled")
$("input:checked")
//select中的option
$("select option:selected")
遍历数组或对象中的数据
$.each(person, function (key, value) {
console.log(key, value)
})
去除字符串两边的空格
$.trim(" zihcao ")
得到数据的类型
console.log($.type($) === "function")
判断是否是数组
console.log($.isArray([]))
判断是否是函数
console.log($.isFunction($)) //true
解析json字符串转换为js对象/数组
var json = '{"username":"jack", "age" : 12}'
console.log($.parseJSON(json)) //js对象
json = '[{"username":"jack", "age" : 12},{"username":"Tom", "age" : 13}]'
console.log($.parseJSON(json)) //js数组
设置或返回被选元素的属性值。
//读取第一个div的title属性
console.log($('div:first').attr('title'))
//给所有的div设置name属性
$('div').attr('name', 'zichao)
从每一个匹配的元素中删除一个属性
//移除所有div的title属性
$('div').removeAttr('title')
获取在匹配的元素集中的第一个元素的属性值。
和attr一致
attr(): //操作属性值为非布尔值的属性
prop(): //专门操作属性值为布尔值的属性
用来删除由.prop()方法设置的属性集
$para.removeProp("checked");
为每个匹配的元素添加指定的类名
//给所有的div添加class='abc'
$('div').addClass('abc')
从所有匹配的元素中删除全部或者指定的类。
//6. 移除所有div的guiguClass的class
$('div').removeClass('zichao')
如果存在(不存在)就删除(添加)一个类。
$(this).toggleClass("name");
取得或设置第一个匹配元素的html内容
//得到最后一个li的标签体文本
console.log($('li:last').html())
//设置第一个li的标签体为"m
"
$('li:first').html('m
')
取得或设置第一个匹配元素的value内容
//得到输入框中的value值
console.log($(':text').val()) // 读取
//将输入框的值设置为zichao
$(':text').val('zichao') // 设置
//获取
$('p').text()
//设置
$("p").text("Hello world!")
设置css样式/读取css值
//得到第一个p标签的颜色
console.log($('p:first').css('color'))
//设置所有p标签的文本颜色为red
$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
})
相对页面左上角的坐标
//获取
var offset1 = $('.div1').offset()
console.log(offset1.left, offset1.top)
//设置
$('.div2').offset({
left: 20,
top: 40
})
相对于父元素左上角的坐标
//获取
var position1 = $('.div1').position()
console.log(position1.left, position1.top)
//设置
$('.div2').position({
left: 20,
top: 40
})
读取/设置滚动条的Y坐标
//获取
$('body').scrollTop()
//设置
$('body').scrollTop(60)
读取/设置滚动条的X坐标
//获取
$('body').scrollLeft()
//设置
$('body').scrollLeft(60)
height(): height
width(): width
console.log($div.width(), $div.height())
innerHeight(): height+padding
innerWidth(): width+padding
console.log($div.innerWidth(), $div.innerHeight())
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin
console.log($div.outerWidth(), $div.outerHeight())
console.log($div.outerWidth(true), $div.outerHeight(true))
在jQuery对象中的元素对象数组中过滤出一部分元素来
获取第一个
var $lis = $('ul>li')
//ul下li标签第一个
$lis.first().css('background', 'red')
获取最后一个
var $lis = $('ul>li')
//ul下li标签的最后一个
$lis.last().css('background', 'red')
获取第N个元素
var $lis = $('ul>li')
//ul下li标签的第二个
$lis.eq(1).css('background', 'red')
筛选出与指定表达式匹配的元素集合
var $lis = $('ul>li')
//ul下li标签中title属性为hello的
$lis.filter('[title=hello]').css('background', 'red')
删除与指定表达式匹配的元素
var $lis = $('ul>li')
//ul下li标签中title属性不为hello的
$lis.not('[title=hello]').css('background', 'red')
保留包含特定后代的元素,去掉那些不含有指定后代的元素
var $lis = $('ul>li')
//ul下li标签中有span子标签的
$lis.has('span').css('background', 'red')
子标签中找
var $ul = $('ul')
//ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background', 'red')
后代标签中找
var $ul = $('ul')
//ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background', 'red')
父标签
var $ul = $('ul')
//ul标签的父标签
$ul.parent().css('background', 'red')
前面所有的兄弟标签
var $li = $('#cc')
//id为cc的li标签的前面的所有li标签
$li.prevAll('li').css('background', 'red')
后面所有的兄弟标签
var $li = $('#cc')
//id为cc的li标签的后面的所有li标签
$li.nextAll('li').css('background', 'red')
前后所有的兄弟标签
var $li = $('#cc')
//id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')
向当前匹配的所有元素内部的最后插入指定内容
//向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1')
$ul1.append('append()添加的span')
向当前匹配的所有元素内部的最前面插入指定内容
//向id为ul1的ul下添加一个span(最前)
$ul1.prepend('prepend()添加的span')
将指定内容插入到当前所有匹配元素的前面
//在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('before()添加的span')
将指定内容插入到当前所有匹配元素的后面替换节点
//在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('after()添加的span')
用指定内容替换所有匹配的标签删除节点
//将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('replaceAll()替换的p
')
删除所有匹配元素的子元素
//移除id为ul2的ul下的所有li
$('#ul2').empty() // li的子元素也会删除
删除所有匹配的元素
//移除id为ul2的ul下的所有li
$('#ul2>li').remove()
eventName(function(){})
绑定对应事件名的监听
例如:
$('#div').click(function(){});
on(eventName, funcion(){})
通用的绑定事件监听
例如:
$('#div').on('click', function(){})
优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
off(eventName)
event.clientX, event.clientY //相对于视口的左上角
event.pageX, event.pageY //相对于页面的左上角
event.offsetX, event.offsetY //相对于事件元素左上角
停止事件冒泡
event.stopPropagation()
阻止事件默认行为
event.preventDefault()
将多个子元素(li)的事件监听委托给父辈元素(ul)处理监听回调是加在了父辈元素上,当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul),父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
设置事件委托
$(parentSelector).delegate(childrenSelector, eventName, callback)
移除事件委托
$(parentSelector).undelegate(eventName)
不断改变元素的透明度(opacity)来实现的
带动画的显示
$div1.fadeIn(1000, function () {
})
带动画隐藏
$div1.fadeOut(1000, function () {
})
带动画切换显示/隐藏
$div1.fadeToggle(1000, function () {
})
不断改变元素的高度实现
带动画的展开
$div1.slideDown()
带动画的收缩
$div1.slideUp(3000)
带动画的切换展开/收缩
$div1.slideToggle()
默认没有动画, 动画(opacity/height/width)
(不)带动画的显示
$div1.show()//不带动画
$div1.show(1000)//带动画
(不)带动画的隐藏
$div1.hide()//不带动画
$div1.hide(1000)//带动画
(不)带动画的切换显示/隐藏
$div1.toggle()//不带动画
$div1.toggle(1000)//带动画
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
自定义动画效果的动画
//宽/高都扩为200px
$div1.animate({
width: 200,
height: 200
}, 1000)
//宽先扩为200px, 高后扩为200px
.animate({
width: 200
}, 1000)
.animate({
height: 200
}, 1000)
停止动画
//停止div1动画
$div1.stop()