1. 了解jQuery
1.1 是什么: What?
- 一个JS函数库: write less, do more
- 封装简化DOM操作(CRUD) / Ajax
1.2 为什么用它: why?
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
1.3 如何使用: How?
- 引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
- 使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象:
$.xxx(执行$()得到的)
2. jQuery的2把利器
2.1 jQuery函数: $/jQuery
- jQuery向外暴露的就是jQuery函数, 可以直接使用
当成一般函数使用: $(param)
- param是
function: 相当于window.onload = function(文档加载完成的监听) - param是
选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象 - param是
DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this) - param是
标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
<script src="js/jquery-1.10.1.js" type="text/jacascript"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
//this是什么？发生事件的dom元素（button）
alert($(this).html())
$('<input type="text" name="msg3"/><br/>').appendTo('div')
})
})
当成对象使用: $.xxx
each(obj/arr, function(key, value){})隐式遍历数组
var arr=[1,2,3]
//隐式遍历数组
$.each(arr,function(index,item){
console.log(index,item)
})
$.trim()：去除两端空格
var str=' ljw '
console.log(‘----’+$.trim(str)+'----')
2.2 jQuery对象
-
包含所有匹配的n个DOM元素的伪数组对象
-
执行$()返回的就是jQuery对象
基本行为:
-
length/size(): 得到dom元素的个数
-
[index]: 得到指定下标对应的dom元素 -
each(function(index, domEle){}): 遍历所有dom元素
-
index(): 得到当前dom元素在所有兄弟中的下标
var $buttons=$('button')
console.log($buttons.size(),$buttons.length)
console.log($buttons[2].innerHTML,$buttons.get(2).innerHTML)
$buttons.each(function(index,domEle){
console.log(index,domEle.innerHTML)
})
$buttons.each(function(){
console.log(this)
})
console.log($('#btn3').index())
伪元素
- Object对象
- Length属性
- 数值下标属性
- 没有数组特别的方法：forEach(),push(),pop(),splice()
3 使用 jQuery 核心函数
3.1 选择器
是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
分类
$('#div1').css('background','red')
$('div').css('background','red')
$('.box').css('background','red')
//选择所有的div和span元素
$('div,span').css('background','red')
//选择所有class属性为box的div
$('div.box').css('background','red')
-
层次
- selector1>selector2: 子元素
- selector1 selector2: 后代元素
- selector1+selector2：紧接在selector1后面的selector2元素
- selector1~selector2：在selector1后面的所有selector2元素
//选中ul下所有的span
$('ul span').css('background','yellow')
//选中ul下所有的子元素span
$('ul>span').css('background','yellow')
//选中class为box的下一个li
$('.box+li').css('background','yellow')
//选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background','yellow')
-
过滤
- 在原有匹配元素中筛选出其中一些
- :first
- :last
- :eq(index) 等于
- :lt 小于
- :gt 大于
- :odd 奇数
- :even 偶数
- :not(selector)
- :hidden
- :visible
- [attrName] 有某个属性的
- [attrName=value] 某个属性值为…的
//选择第一个div
$('div:first').css('background','red')
//选择最后一个class为box的元素
$('.box:last').css('background','red')
//选择所有class属性不为box的div
$('div:not(.box )').css('background','red')//没有class属性的也会被选中
//选择第二个和第三个li元素
$('li:gt(0):lt(2)').css('background','red')//多个过滤选择器不是同时执行，而是依次
$('li:lt(3):gt(0)').css('background','red')
//选择内容为BBBBB的li
$('li:contains("BBBBB")').css('background','red')
//选择隐藏的li
console.log($('li:hidden').length,$('li:hidden')[0])
//选择有title属性的li元素
$('li[title]').css('background','red')
//选择所有属性title为hello的li元素
$('li[title=hello]').css('background','red')
$('li[title="hello"]').css('background','red')
常见效果1：表格隔行变色
$('#data>tbody>tr:odd').css('background','#ccccff')
//选择不可用的文本输入框
$(':text:disabled').css('background','red')
//显示选择爱好的个数
console.log($(':checkbox:checked').length)
//显示选择的城市名称
$(':submit').click(function(){
var city=$('select>option:selected').html()//选择的option的标签体文本
city=$('select').val()//选择的option的value属性值
alert(city)
})
3.2 工具
$.each()：遍历数组或对象中是数据$.trim()：去除字符串两边的空格$.type(obj)：得到数据的类型$.isArray(obj)：判断是否是数组$.isFunction(obj)判断是否是函数$.parseJSON(json)：解析json字符串转换为is对象/数组
$.each(obj,function(key,value){
console.log(key,value)
})
console.log($.type($))//'function'
console.log($.isArray($('body')),$.isArray([]))//false true
//JSON对象：{}
var json='{"name":"Tom","age":12}'
//json对象===》JS对象
console.log($.parseJSON(json))
//JSON数组：[]
json='[{"name":"Tom","age":12},{"name":"JACK","age":13}]'
//json数组===》JS数组
console.log($.parseJSON(json))
JSON.parse(jsonString)
JSON.stringfy(jsObj/jsArr)
常见效果2：多Tab点击切换
var $contents=$('#container>div')
// 给3个li加监听
$('#tab>li').click(function(){ //隐式遍历
//隐藏所有内容div
$contents.css('display','none')
//显示对应的内容div
var index=$(this).index()
$contents[index].style.display='block' //dom法效率更高
$($contents[index]).css('display','block')//jQuery法
})
更加高效的方法：只隐藏当前显示层
var $contents=$('#container>div')
var currIndex=0
// 给3个li加监听
$('#tab>li').click(function(){ //隐式遍历
//隐藏当前已经显示的内容div
$contents[currIndex].style.display='none'
//显示对应的内容div
var index=$(this).index()
$contents[index].style.display='block' //dom法效率更高
currIndex=index
})
3.3 ajax
4. 使用 jQuery 对象
4.1 属性/文本
- 操作标签的属性, 标签体文本
- attr(name) / attr(name, value): 读写非布尔值的标签属性
- prop(name) / prop(name, value): 读写布尔值的标签属性
- removeAttr(name)/removeProp(name): 删除属性
- addClass(classValue): 添加class
- removeClass(classValue): 移除指定class
- val() / val(value): 读写标签的value
- html() / html(htmlString): 读写标签体文本
//读取第一个div的title属性
console.log($('div:first').attr('title'))
//给所有的div设置name属性
$('div').attr('name','ljw')
//移除所有div的title属性
$('div').removeAttr('title')
//给所有的div设置class='ljw'
$('div').attr('class','ljw')
//给所有的div添加class='abc'
$('div').addClass('abc')
//移除所有div的guiguClass的class
$('div').removeClass('guiguClass')
//得到最后一个li的标签体文本
console.log($('li:last').html())
//设置第一个li的标签体为“<h1>mmmmmmm</h1>”
$('li:first').html('<h1>mmmmmmm</h1>')
//得到输入框中的value值
console.log($(':text').val())
//将输入框的值设置为ljw
$(':text').val('ljw')
//点击‘全选’按钮实现全选
var $checkboxs=$(':checkbox')
$('button:first').click(function(){
$checkboxs.prop('checked',true)
})
//点击‘全不选’按钮实现全不选
$('button:last').click(function(){
$checkboxs.prop('checked',false)
})
//表格隔行换色
$('#data>tbody>tr:odd').attr('class','odd')
4.2 CSS
- style样式
- css(styleName): 根据样式名得到对应的值
- css(styleName, value): 设置一个样式
- css({多个样式对}): 设置多个样式
//得到第一个p标签的颜色
console.log($('p:first').css('color'))
//设置所有p标签的文本颜色为red
$('p').css('color','red')
//设置第2个p的字体颜色（#ff0011），背景（blue）,宽（300px）,高（30px）
$('p:eq(1)').css({
color:'#ff0011',
background:'blue',
width:300,
height:30
})
- 位置坐标
- offset(): 读/写当前元素坐标(原点是页面左上角)
- position(): 读当前元素坐标(原点是父元素左上角)
- scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
1.点击btn1
$('#btn1').click(function(){
//打印div1相对于页面左上角的位置
var offset=$('.div1').offset()
console.log(offset.left,offset.top)
//打印div2相对于页面左上角的位置
offset=$('.div2').offset()
console.log(offset.left,offset.top)
//打印div1相对于父元素左上角的位置
var position=$('.div1').position()
console.log(position.left,position.top)
//打印div2相对于父元素左上角的位置
position=$('.div2').position()
console.log(position.left,position.top)
})
2.点击btn2
$('#btn2').click(function(){
//设置div2相对于页面的左上角的位置
$('.div2').offset({
left：50，
top:100
})
})
3.得到div或页面滚动条的坐标
$('#btn1').click(function(){
console.log($('div').scrollTop())//得到div的
console.log($('html').scrollTop()+$('body').scrollTop())//得到页面，兼容不同浏览器
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop())//效率更高
})
4.让div或页面的滚动条滚动到指定位置
$('#btn2').click(function(){
$('div').scrollTop(200)
$('html,body').scrollTop(300)
})
常见效果3：回到顶部
$('#to_top').click(function(){
//瞬间滚到顶部
$('html,body').scrollTop(0)
//平滑滚到顶部
var $page=$('html,body')
//总距离
var distance=$('html').scrollTop()+$('body').scrollTop()
//总时间
var time=500
//间隔时间
var intervalTime=50
var itemDistance=distance/(time/intervalTime)
//使用循环定时器不断滚动
var intervalId=setInterval(function(){
distance-=itemDistance
//到达顶部，停止定时器
if(distance<=0){
distance=0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
},intervalTime)
})
- 尺寸
- width()/height(): width/height
- innerWidth()/innerHeight(): width + padding
- outerWidth(false/true)/outerHeight(false/true): width + padding + border 如果是true，加上margin
var $div=$('div')
//1.内容尺寸
console.log($div.width(),$div.height())//100 150
//2.内部尺寸
console.log($div.innerWidth(),$div.innerHeight())//120 170
//3.外部尺寸
console.log($div.outerWidth(),$div.outerHeight())//140 190
console.log($div.outerWidth(true),$div.outerHeight(true))//160 210
4.3 文档
- 增加
- append() / appendTo(): 插入后部
- preppend() / preppendTo(): 插入前部
- before(): 插到前面
- after(): 插到后面
- 删除
- remove(): 将自己及内部的孩子都删除
- empty(): 掏空(自己还在)
- 更新
- replaceWith()
//向id为ul1的ul下添加一个span(最后)
var $ul1=$('#ul1')
$ul1.append('<span>append()添加的span</span>')
$('<span>appendTo()添加的span</span>').appendTo($ul1)
//向id为ul1的ul下添加一个span(最前)
$ul1.prepend('<span>prepend()添加的span</span>')
//在id为ul1的ul下的li(title为hello)的前面添加span
$('<span>prepend()添加的span</span>').prependTo($ul1)
//在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').before('<span>before()添加的span</span>')
//将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replaceWith()替换的p</p>')
//移除id为ul2的ul下的所有li
$('#ul2').empty()//清空ul2下所有内容
$('#ul2>li').remove()
4.4 筛选
- 过滤
- 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
- first()
- last()
- eq(index)
- filter(selector): 对当前元素提要求
- not(selector): 对当前元素提要求, 并取反
- has(selector): 对子孙元素提要求
var $lis=$('ul>li')
//ul下li标签第一个
$lis.first().css('background','red')
//ul下li标签的最后一个
$lis.last().css('background','red')
//ul下li标签的第二个
$lis.eq(1).css('background','red')
//ul下li标签中title属性为hello的
$lis.filter('[title=hello]').css('background','red')
//ul下li标签中title属性不为hello的
$lis.not('[title=hello]').css('background','red')
$lis.filter('[title!=hello]').filter('[title]').css('background','red')
//ul下li标签中有span字标签的
$lis.has('span').css('background','red')
- 查找
- 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
- children(selector): 子元素
- find(selector): 后代元素
- preAll(selector): 前的所有兄弟
- siblings(selector): 所有兄弟
- parent(): 父元素
//ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background','red')
//ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background','red')
//ul标签的父元素
$ul.parent().css('background','red')
//id为cc的li标签的前面的所有li标签
var $li=$('#cc')
$li.prevAll('li').css('background','red')
//id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background','red')
练习1.爱好选择器
var #checkedAllBox=$('#checkedAllBox')
var $items=$(':checkbox[name=items]')
//点击‘全选’：选中所有爱好
$('#checkedAllBtn').click(function(){
$items.prop('checked',true)
})
//点击‘全不选’：所有爱好都不勾选
$('#checkedAllBtn').click(function(){
$items.prop('checked',false)
})
//点击‘反选’：改变所有爱好的勾选状态
$('#checkedRevBtn').click(function(){
$items.each(function(){
this.checked=!this.checked
})
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
//点击‘提交’：提示所有勾选的爱好
$('#sendBtn').click(function(){
$items.filter(':checked').each(function(){
alert(this.value)
})
})
//点击‘全选/全不选’：选中所有爱好，或者全不选
$checkedAllBox.click(function(){
$items.prop('checked',this.checked)
})
//点击某个爱好时，必要时更新‘全选/全不选’的选中状态
$item.click(function(){
$checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
})
4.5 事件
- 绑定事件
- eventName(function(){})
- on(‘eventName’, function(){})
- 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
- hover(function(){}, function(){})
- 解绑事件
- off(‘eventName’)
- 事件坐标
- event.offsetX: 原点是当前元素左上角
- event.clientX: 原点是窗口左上角
- event.pageX: 原点是页面左上角
- 事件相关
- 停止事件冒泡: event.stopPropagation()
- 阻止事件的默认行为: event.preventDefault()
//1. 给.out绑定点击监听(用两种方法绑定)
$('.out').click(function () {
console.log('click out')
})
$('.out').on('click', function () {
console.log('on click out')
})
//2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
$('.inner')
.mouseenter(function () { // 进入
console.log('进入')
})
.mouseleave(function () { // 离开
console.log('离开')
})
$('.inner')
.on('mouseenter', function () {
console.log('进入2')
})
.on('mouseleave', function () {
console.log('离开2')
})
$('.inner').hover(function () {
console.log('进入3')
}, function () {
console.log('离开3')
})
//3. 点击btn1解除.inner上的所有事件监听
$('#btn1').click(function () {
$('.inner').off()
})
//4. 点击btn2解除.inner上的mouseenter事件
$('#btn2').click(function () {
$('.inner').off('mouseenter')
})
//5. 点击btn3得到事件坐标
$('#btn3').click(function (event) { // event事件对象
console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
console.log(event.clientX, event.clientY) // 原点为窗口的左上角
console.log(event.pageX, event.pageY) // 原点为页面的左上角
})
//6. 点击.inner区域, 外部点击监听不响应
$('.inner').click(function (event) {
console.log('click inner')
//停止事件冒泡
event.stopPropagation()
})
//7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click(function (event) {
if(Date.now()%2===0) {
event.preventDefault()
}
})
事件委托
- 事件委托(委派/代理):
- 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
- 监听回调是加在了父辈元素上
- 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
- 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
- 事件委托的2方:
- 委托方: 业主 li
- 被委托方: 中介 ul
- 使用事件委托的好处
- 添加新的子元素, 自动有事件响应处理
- 减少事件监听的数量: n==>1
- jQuery的事件委托API
- 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
- 移除事件委托: $(parentSelector).undelegate(eventName)
// 设置事件委托
$('ul').delegate('li', 'click', function () {
// console.log(this)
this.style.background = 'red'
})
$('#btn1').click(function () {
$('ul').append('<li>新增的li....</li>')
})
$('#btn2').click(function () {
// 移除事件委托
$('ul').undelegate('click')
})
事件面试题
- 区别
mouseover与mouseenter?- mouseover: 在移入子元素时也会触发, 对应mouseout
- mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()
- 区别
on('eventName', fun)与eventName(fun)- on(‘eventName’, fun): 通用, 但编码麻烦
- eventName(fun): 编码简单, 但有的事件没有对应的方法
4.6 效果
- 动画效果
- 在一定的时间内, 不断改变元素样式
- slideDown()/slideUp()/slideToggle()
- fadeOut()/fadeIn()/fadeToggle()
- show()/hide()/toggle()
- animate({结束时的样式}, time, fun)
- stop()
淡入淡出
- 不断改变元素的透明度(opacity)来实现的
- fadeIn(): 带动画的显示
- fadeOut(): 带动画隐藏
- fadeToggle(): 带动画切换显示/隐藏
/*
需求：
1. 点击btn1, 慢慢淡出
* 无参
* 有参
* 字符串参数
* 数字参数
2. 点击btn3, 慢慢淡入
3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
*/
var $div1 = $('.div1')
$('#btn1').click(function () {
// $div1.fadeOut()
// $div1.fadeOut('slow')
$div1.fadeOut(1000, function () {
alert('动画完成了!!!')
})
})
$('#btn2').click(function () {
$div1.fadeIn()
})
$('#btn3').click(function () {
$div1.fadeToggle()
})
滑动
- 滑动动画: 不断改变元素的高度实现
- slideDown(): 带动画的展开
- slideUp(): 带动画的收缩
- slideToggle(): 带动画的切换展开/收缩
// 1. 点击btn1, 向上滑动
$('#btn1').click(function () {
$div1.slideUp(3000)
})
// 2. 点击btn2, 向下滑动
$('#btn2').click(function () {
$div1.slideDown()
})
// 3. 点击btn3, 向上/向下切换
$('#btn3').click(function () {
$div1.slideToggle()
})
显示与隐藏
- 显示隐藏，默认没有动画, 动画(opacity/height/width)
- show(): (不)带动画的显示
- hide(): (不)带动画的隐藏
- toggle(): (不)带动画的切换显示/隐藏
var $div1 = $('.div1')
//1. 点击btn1, 立即显示
$('#btn1').click(function () {
$div1.show()
})
//2. 点击btn2, 慢慢显示
$('#btn2').click(function () {
$div1.show(1000)
})
//3. 点击btn3, 慢慢隐藏
$('#btn3').click(function () {
$div1.hide(1000)
})
//4. 点击btn4, 切换显示/隐藏
$('#btn4').click(function () {
$div1.toggle(1000)
})
自定义动画
- jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
- animate(): 自定义动画效果的动画
- stop(): 停止动画
/*
1. 逐渐扩大
1). 宽/高都扩为200px
2). 宽先扩为200px, 高后扩为200px
*/
$('#btn1').click(function () {
$div1.animate({
width: 200,
height: 200
}, 1000)
$div1
.animate({
width: 200
}, 1000)
.animate({
height: 200
}, 1000)
})
/*
2. 移动到指定位置
1).移动到(500, 100)处
2).移动到(100, 20)处
*/
$('#btn2').click(function () {
// 1).移动到(500, 100)处
$div1.animate({ // 向右下移动
left: 500,
top: 100
}, 1000)
// 2).移动到(100, 20)处
$div1.animate({ // 向左上移动
left: 100, // 300
top: 20 // 50
}, 1000)
})
/*
3.移动指定的距离
1). 移动距离为(100, 50)
2). 移动距离为(-100, -20)
*/
$('#btn3').click(function () {
// 1). 移动距离为(100, 50)
$div1.animate({
left: '+=100',
top: '+=50'
}, 1000)
// 2). 移动距离为(-100, -20)
$div1.animate({
left: '-=100',
top: '-=20'
}, 3000)
})
$('#btn4').click(function () {
$div1.stop()
})
4.7 jQuery对象使用特点
5. jQuery插件
5.1 1. 扩展jQuery的工具方法
$.extend(object)
$.extend({
xxx: fuction () {} // this是$
})
$.xxx()
- 给 $ 添加4个工具方法:
- min(a, b) : 返回较小的值
- max(c, d) : 返回较大的值
- leftTrim() : 去掉字符串左边的空格
- rightTrim() : 去掉字符串右边的空格
$.extend({
min: function (a, b) {
return a < b ? a : b
},
max: function (a, b) {
return a > b ? a : b
},
leftTrim: function (str) {
return str.replace(/^\s+/, '')
},
rightTrim: function (str) {
return str.replace(/\s+$/, '')
}
})
console.log($.min(3, 5), $.max(3, 5))
var string = ' my atguigu '
console.log('-----' + $.leftTrim(string) + '-----')
console.log('-----' + $.rightTrim(string) + '-----')
5.2 扩展jQuery对象的方法
$.fn.extend(object)
$.fn.extend({
xxx: function(){} // this是jQuery对象
})
$obj.xxx()
- 给jQuery对象 添加3个功能方法:
- checkAll() : 全选
- unCheckAll() : 全不选
- reverseCheck() : 全反选
$.fn.extend({
checkAll: function () {
this.prop('checked', true) // this是jQuery对象
},
unCheckAll: function () {
this.prop('checked', false)
},
reverseCheck: function () {
// this是jQuery对象
this.each(function () {
// this是dom元素
this.checked = !this.checked
})
}
})
var $items = $(':checkbox[name=items]')
$('#checkedAllBtn').click(function () {
$items.checkAll()
})
$('#checkedNoBtn').click(function () {
$items.unCheckAll()
})
$('#reverseCheckedBtn').click(function () {
$items.reverseCheck()
})
6. 面试题
6.1 多库共存
- 问题 : 如果有2个库都有 $ , 就存在冲突
- 解决 : jQuery库可以释放 $ 的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
- API : jQuery.noConflict()
(function () {
window.$ = function () {
console.log('my lib $()...')
}
})()
// 释放$的使用权
jQuery.noConflict()
// 调用myLib中的$
$()
// 要想使用jQuery的功能, 只能使用jQuery
jQuery(function () {
console.log('文档加载完成')
})
console.log('+++++')
6.2 onload与ready
区别: window.onload与 $(document).ready()
- window.onload
- 包括页面的图片加载完后才会回调(晚)
- 只能有一个监听回调
- $(document).ready()
- 等同于: $(function(){})
- 页面加载完就回调(早)
- 可以有多个监听回调
/*
需求：
1. 直接打印img的宽度，观察其值
2. 在 $(function(){}) 中 打印 img 的宽度
3. 在 window.onload 中打印宽度
4. 在 img 加载完成后打印宽度
*/
// 1. 直接打印img的宽度，观察其值
console.log('直接', $('#logo').width())
window.onload = function () {
console.log('onload', $('#logo').width())
}
window.onload = function () {
console.log('onload2', $('#logo').width())
}
$(function () {
console.log('ready', $('#logo').width())
})
$(function () {
console.log('ready2', $('#logo').width())
})
$('#logo').on('load', function () {
console.log('img load', $(this).width())
})
/*$(document).ready(function () {
})*/
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
