一：初识jQuery

  1. 1. 引入jQuery库


本地引入
远程引入
2. 使用jQuery函数和jQuery对象编码

二：jQuery两把利器

  1. jQuery核心函数
    简称: jQuery函数($/jQuery)
    jQuery库向外直接暴露的就是$/jQuery
    引入jQuery库后, 直接使用$即可
    当函数用: $(xxx)
    当对象用: $.xxx()
    2. jQuery核心对象
    简称: jQuery对象
    得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
    使用jQuery对象: $obj.xxx()

    三：jQuery核心函数

  2. 作为一般函数调用: $(param)
    1). 参数为函数 : 当DOM加载完成后，执行此回调函数
    2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    3). 参数为DOM对象: 将dom对象封装成jQuery对象
    4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
    2. 作为对象使用: $.xxx()
    1). $.each() : 隐式遍历数组
    2). $.trim() : 去除两端的空格

    四：jQuery对象

  3. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
    2. 基本行为
    size()/length: 包含的DOM元素个数
    [index]/get(index): 得到对应位置的DOM元素
    each(): 遍历包含的所有DOM元素
    index(): 得到在所在兄弟元素中的下标

    五：基本选择器

  4. 是什么?
    - 有特定格式的字符串
    2. 作用
    - 用来查找特定页面元素
    3. 基本选择器
    - #id : id选择器
    - element : 元素选择器
    - .class : 属性选择器
    - * : 任意标签
    - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
    - selector1selector2selectorN : 取多个选择器的交集(相交选择器)

    六：层次选择器

    层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
    1. ancestor descendant
    在给定的祖先元素下匹配所有的后代元素
    2. parent>child
    在给定的父元素下匹配所有的子元素
    3. prev+next
    匹配所有紧接在 prev 元素后的 next 元素
    4. prev~siblings
    匹配 prev 元素之后的所有 siblings 元素

    七：过滤选择器

  5. 选择第一个div
    $(‘div:first’).css(‘background’,’red’)
    2. 选择最后一个class为box的元素
    $(‘.box:last’).css(‘background’,’red’)
    3. 选择所有class属性不为box的div
    $(‘div:not(.box)’).css(‘background’,’red’)
    4. 选择第二个和第三个li元素
    $(‘li:gt(0):lt(2)’).css(‘background’,’red’)
    5. 选择内容为BBBBB的li
    $(‘li:contains(“BBBBB”)’).css(‘background’,’red’)
    6. 选择隐藏的li
    console.log($(‘li:hidden’).length)
    7. 选择有title属性的li元素
    $(‘li[title]’).css(‘background’,’red’)
    8. 选择所有属性title为hello的li元素
    $(‘li[title=”hello”]’).css(‘background’,’red’)

    八：表单选择器

  6. 选择不可用的文本输入框
    $(‘:text:disabled’).css(‘background’,’red’)
    2. 显示选择爱好 的个数
    console.log($(‘input:checked’).length)
    3. 显示选择的城市名称
    $(‘:submit’).click(function(){
    alert( $(‘select’).val())
    })

    九：工具方法

  7. $.each(): 遍历数组或对象中的数据
    2. $.trim(): 去除字符串两边的空格
    3. $.type(obj): 得到数据的类型
    4. $.isArray(obj): 判断是否是数组
    5. $.isFunction(obj): 判断是否是函数
    6. $.parseJSON(json) : 解析json字符串转换为js对象/数组

    十：属性

  8. 操作任意属性
    attr()//操作class会覆盖原来的
    removeAttr()
    prop()
    2. 操作class属性
    addClass()
    removeClass()
    3. 操作HTML代码/文本/值
    html()
    val()

    十一：CSS

    设置css样式/读取css值
    css()

    十二：元素坐标

    获取/设置标签的位置数据
    offset(): 相对页面左上角的坐标
    position(): 相对于父元素左上角的坐标

    十三：元素滚动

  9. scrollTop():
    读取/设置滚动条的Y坐标
    2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
    读取页面滚动条的Y坐标(兼容chrome和IE)
    3. $(‘body,html’).scrollTop(60);
    滚动到指定位置(兼容chrome和IE)

    十四：元素的尺寸

  10. 内容尺寸
    height(): height
    width(): width
    2. 内部尺寸
    innerHeight(): height+padding
    innerWidth(): width+padding
    3. 外部尺寸
    outerHeight(false/true): height+padding+border 如果是true, 加上margin
    outerWidth(false/true): width+padding+border 如果是true, 加上margin

    十五：过滤

    在jQuery对象中的元素对象数组中过滤出一部分元素来

  11. first()
    2. last()
    3. eq(index|-index)
    4. filter(selector)
    5. not(selector)
    6. has(selector)

1.ul下li标签第一个
$(‘ul>li’).first().css(‘background’, ‘red’)
$(‘ul>li:first’).css(‘background’, ‘red’)
2.ul下li标签的最后一个
$(‘ul>li’).last().css(‘background’, ‘red’)
$(‘ul>li:last’).css(‘background’, ‘red’)
3.ul下li标签的第二个
$(‘ul>li’).eq(2).css(‘background’, ‘red’)
$(‘ul>li:eq(2)’).css(‘background’, ‘red’)
4.ul下li标签中title属性为hello的
$(‘ul>li[title=hello]’).css(‘background’, ‘red’)
$(‘ul>li’).filter(‘[title=hello]’).css(‘background’, ‘red’)
5.ul下li标签中title属性不为hello的
$(‘ul>li’).filter(‘[title!=hello]’).css(‘background’, ‘red’)
6.ul下li标签中有span子标签的
$(‘ul>li’).has(‘span’).css(‘background’, ‘red’)

十六：查找孩子、父母、兄弟标签

1.ul标签的第2个span子标签

$(‘ul’).children(‘span:eq(1)’).css(‘background’,red)

2.ul标签的第2个span后代标签

$(‘ul’).find(‘span:eq(1)’).css(‘background’,red)

3.ul标签的父标签

$(‘ul’).parent().css(‘background’,red)

4.Id为cc的li标签的前面的所有的li标签

$(‘li#cc’).prevAll(‘li’).css(‘background’,red)

5.Id为cc的li标签的所有兄弟li标签

$(‘li#cc’).sliblings(‘li’).css(‘background’,red)

十七：文档增删改

1.向id为ul1的ul下添加一个span(最后)

$(‘ul#ul1’).append(‘append()添加的span‘)
$(‘append()添加的span‘).appendTo(‘ul#ul1’)

2.向id为ul1的下面添加一个span（最前）

$(‘ul#ul1’).prepend(‘prependTo添加的span‘)
$(‘prependTo()添加的span‘).prependTo(‘ul#ul1’)

3.向id为ul1的ul下面的li(title为hello)的前面添加一个span（子元素前后）

$(‘ul#ul1’).children(‘li[title=hello]’).before(‘before()添加的span‘)

4.向id为ul1的ul下面的li(title为hello)的后面添加一个span

$(‘ul#ul1’).children(‘li[title=hello]’).after(‘after()添加的span‘)

5.向id为ul2的ul下面的li(title为hello)全部替换为p

$(‘ul#ul2’).children(‘li[title=hello]’).replaceWith(‘

replaceWith替换的p

‘)

6.移除id为ul2的ul下的所有的li

$(‘ul#ul2’).children(‘li’).remove()//删除所有的li
$(‘ul#ul2’).empty()//将自己的子元素全部清空

十八：事件的绑定与解绑

1.事件绑定(2种)：

  • eventName(function(){})
    绑定对应事件名的监听, 例如：$(‘#div’).click(function(){});
  • on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$(‘#div’).on(‘click’, function(){})

  • 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用

    2.事件解绑：

  • off(eventName)

    3.事件的坐标

  • event.clientX, event.clientY 相对于视口的左上角

  • event.pageX, event.pageY 相对于页面的左上角

  • event.offsetX, event.offsetY 相对于事件元素左上角

    4.事件相关处理

  • 停止事件冒泡 : event.stopPropagation()

  • 阻止事件默认行为 : event.preventDefault()

    5.代码示例

    1.给class为inner的div的鼠标移入和鼠标移出事件绑定监听函数

    $(‘div.inner’).on(‘mouseenter’,function(){
    console.log(‘进入’)
    }).on(‘mouseleave’,function(){
    console.log(‘离开’)
    })
    $(‘div.inner’).hover(function () {
    console.log(‘进入’)
    }, function () {
    console.log(‘离开’)
    })

    2.点击btn2解除inner上的mouseenter事件

    $(‘#btn2’).on(‘click’,function(){
    $(‘div.inner’).off(‘mouseenter’)
    })

    3. 点击.inner区域, 外部点击监听不响应

    $(‘.inner’).click(function(){
    console.log(‘哈哈哈’)
    event.stopPropagation()
    })

    4. 点击链接, 如果当前时间是偶数不跳转

    $(‘#test4’).click(function(event){
    if(Date.now()%2==0){
    event.preventDefault()
    }
    })

    6.事件相关面试题

    区别mouseover与mouseenter?
    mouseover: 在移入子元素时也会触发, 对应mouseout
     mouseenter: 只在移入当前元素时才触发, 对应mouseleave
    hover()使用的就是mouseenter()和mouseleave()
    *hover()示例代码：
    $(‘.div3’).hover(function () {
    console.log(‘移入div33元素’)
    this.style.background = ‘red’
    }, function () {
    console.log(‘移出div33元素’)
    this.style.background = ‘blue’
    })

    7.事件的委托

  1. 事件委托:
  • 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  • 监听回调是加在了父辈元素上
  • 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  • 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
  1. 事件委托的2方:
  • 委托方: 业主 li
  • 被委托方: 中介 ul
  1. 使用事件委托的好处
  • 添加新的子元素, 自动有事件响应处理
  • 减少事件监听的数量: n==>1
  1. jQuery的事件委托API
  • 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  • 移除事件委托: $(parentSelector).undelegate(eventName)

    十九：淡入淡出

    1. 点击 btn1 实现 慢慢淡出

    $(‘#btn1’).click(function () {
    // $(‘.div1’).fadeOut()
    // $(‘.div1’).fadeOut(1000)
    $(‘.div1’).fadeOut(‘fast’)
    /
    fast: 200
    normal: 400
    fast: 600
    /
    })

    2. 点击 btn3 实现 慢慢淡入

    $(‘#btn2’).click(function () {
    $(‘.div1’).fadeIn()
    })

3. 点击 btn3 实现 淡出/淡入切换

  1. $('#btn3').click(function () {<br />      $('.div1').fadeToggle(function () {<br />        alert('动画结束了')<br />      })<br />    })

二十：滑动

1. 点击 btn1 实现 向上滑动

  1. $('#btn1').click(function () {<br />      $('div').slideUp()<br />    })

2. 点击 btn3 实现 向下滑动

  1. $('#btn2').click(function () {<br />      $('div').slideDown()<br />    })

3. 点击 btn3 实现 向上/向下切换

  1. $('#btn3').click(function () {<br />      $('div').slideToggle(2000)<br />    })

二十一：显示与隐藏

1. 点击btn1, 立即显示

  1. $('#btn1').click(function () {<br />      $('div').show()<br />    })

2. 点击btn2, 慢慢显示

  1. $('#btn2').click(function () {<br />      $('div').show(1000)<br />    })

3. 点击btn3, 慢慢隐藏

  1. $('#btn3').click(function () {<br />      $('div').hide(2000)<br />    })

4. 点击btn4, 切换显示/隐藏

  1. $('#btn4').click(function () {<br />      $('div').toggle()<br />    })

二十二：自定义动画

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

  1. animate(): 自定义动画效果的动画
  2. stop(): 停止动画

// 1). 宽/高都扩为200px
/$div1
.animate({
width: 200,
height: ‘200px’
}, 1000)/

  1.  2). 宽先扩为200px, 高后扩为200px
  2. $div1
  3.   .animate({
  4.     width: 200
  5.   }, 2000)
  6.   .animate({
  7.     height: 200
  8.   }, 2000)

})

/
2. 移动到指定位置
1).移动到(500, 100)处
2).移动到(100, 20)处
/
$(‘#btn2’).click(function () {

  1. 1).移动到(500, 100)处
  2. /*$div1
  3.  .animate({
  4.  left: 500,
  5.  top: 100
  6.  }, 1000)*/
  7. 2).移动到(100, 20)处
  8. $div1
  9.   .animate({
  10.     left: 100,
  11.     top: 20
  12.   }, 1000)

})

/
3.移动指定的距离
1). 移动距离为(100, 50)
2). 移动距离为(-100, -20)
/
jQuery - 图1.click(function%20()%20%7B%0A%20%20%20%20%2F%2F%201).%20%E7%A7%BB%E5%8A%A8%E8%B7%9D%E7%A6%BB%E4%B8%BA(100%2C%2050)%0A%20%20%20%20%2F#card=math&code=%28%27%23btn3%27%29.click%28function%20%28%29%20%7B%0A%20%20%20%20%2F%2F%201%29.%20%E7%A7%BB%E5%8A%A8%E8%B7%9D%E7%A6%BB%E4%B8%BA%28100%2C%2050%29%0A%20%20%20%20%2F%2A&id=HXD2O)div1.animate({
left: ‘+=100’,
top: ‘+=50’
}, 1000)/

  1. 2). 移动距离为(-100, -20)
  2. $div1.animate({
  3.   left: '-=100',
  4.   top: '-=20'
  5. }, 1000)

})

/
4. 停止动画
/
$(‘#btn4’).click(function () {
$div1.stop() // 只停止当前运行的动画(后面其它动画还会运行)
// $div1.stop(true) // 停止所有动画
// $div1.stop(true, true)
})

二十三：扩展插件

扩展jQuery的工具方法 : $.extend(object)
min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim() : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格
*/

正则：

^ 匹配字符串开始
\s 匹配空格
+ 匹配一次或者多次
$ 匹配字符串的末尾

1.扩展$的方法($.extend(object))代码示例：

$.extend({
min: function (a, b) {
return (a < b) ? a : b
},
max: function (a, b) {
return (a > b) ? a : b
},
leftTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/^\s+/, ‘’)
},
rightTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/\s+$/, ‘’)
}
})

2.扩展jQuery对象的方法 $(‘#id’).XXXXX

//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
checkAll: function () {
// console.log(‘checkAll’)
this.prop(‘checked’, true)//this是jquery对象
},
unCheckAll: function () {
this.prop(‘checked’, false)
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked//this是dom元素
})
}

3.用法

$(‘#checkedAllBtn’).click(function () {
$(‘:checkbox’).checkAll()
})

二十四：多库共存

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

二十五：onload与ready

区别: window.onload与 $(document).ready()

  • window.onload
    • 包括页面的图片加载完后才会回调(晚)
    • 只能有一个监听回调
  • $(document).ready()
    • 等同于: $(function(){})
    • 页面加载完就回调(早)
    • 可以有多个监听回调