(zichao)jQuery笔记仅作，未探究

zichao_99

2024-03-16 帮助3人

一、jQuery基础

（一）初识jQuery

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)
      	})
    })

（二）jQuery引入

<!--本地引入-->
<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两大核心

1、jQuery核心函数

简称: jQuery函数($/jQuery)

jQuery库向外直接暴露的就是$/jQuery

//大致源码
(function (window) {
    var jQuery = function () {
      return new xxx()
	}

	window.$ = window.jQuery = jQuery
})(window)

引入jQuery库后, 直接使用$即可

jQuery函数: 直接可用， $(xxx)

（1）作为一般函数调用: $(param)，参数为函数

当DOM加载完成后，执行此回调函数

$(function(){})

（2）作为一般函数调用: $(param)，参数为选择器字符串

查找所有匹配的标签, 并将它们封装成jQuery对象

$('#btn')

（3）作为一般函数调用: $(param)，参数为DOM对象

将dom对象封装成jQuery对象

$(this)

（4）作为一般函数调用: $(param)，参数为参数为html标签字符串 (用得少)

创建标签对象并封装成jQuery对象

$('<input type="text" name="msg3"/><br/>')

（5）作为对象使用: $.xxx()

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) '---')

2、jQuery核心对象

简称: jQuery对象

得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

使用jQuery对象: $obj.xxx()

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象

（1）size()/length: 包含的DOM元素个数

var $buttons = $('button')
/*size()/length: 包含的DOM元素个数*/
console.log($buttons.size(), $buttons.length)

（2） [index]/get(index): 得到对应位置的DOM元素

/*[index]/get(index): 得到对应位置的DOM元素*/
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)

（3） each(): 遍历包含的所有DOM元素

$buttons.each(function (index, domEle) {
    console.log(index, domEle.innerHTML, this)
})

（4） index(): 得到在所在兄弟元素中的下标

console.log($('#btn3').index())

二、jQuery选择器

有特定格式的字符串，用来查找特定页面元素

（一）基本选择器

1、id选择器

//选择id为div1的元素
$('#div1').css('background', 'red')

2、元素选择器

//选择所有的div元素
$('div').css('background', 'red')

3、类选择器

//选择所有class属性为box的元素
$('.box').css('background', 'red')

4、通用选择器

//匹配所有元素
$('*').css('background', 'red')

5、交集并集选择器

//选择所有class属性为box的div元素
$('div.box').css('background', 'red')

//选择所有的div和span元素
$('div,span').css('background', 'red')

（二）层次选择器

1、ancestor descendant

在给定的祖先元素下匹配所有的后代元素

//选中ul下所有的的span
$('ul span').css('background', 'red')

2、parent>child

在给定的父元素下匹配所有的子元素

//选中ul下所有的子元素span
$('ul>span').css('background', 'red')

3、prev next

匹配所有紧接在 prev 元素后的 next 元素

//选中class为box的下一个li
$('.box li').css('background', 'red')

4、prev~siblings

匹配 prev 元素之后的所有 siblings 元素

//选中class为box的元素后面的所有兄弟元素
$('.box~*').css('background', 'red')

（三）过滤选择器

1、第一个

//选择第一个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、单数偶数

//匹配所有索引值为偶数的元素，从 0 开始计数
$("tr:even")
//匹配所有索引值为奇数的元素，从 0 开始计数
$("tr:odd")

5、索引值

//匹配一个给定索引值的元素，从 0 开始计数
$("tr:eq(1)")

6、索引值范围

//匹配所有大于给定索引值的元素
$("tr:gt(0)")
//匹配所有小于给定索引值的元素
$("tr:lt(2)")
//可以结合使用

7、动画效果的元素

//匹配所有正在执行动画效果的元素
$("div:not(:animated)")

8、内容

//匹配包含给定文本的元素
$("div:contains('zichao')")

9、可见性

//匹配所有不可见元素
$("tr:hidden")
//匹配所有的可见元素
$("tr:visible")

10、特定属性

$("div[id]")
//属性等于一个值
$("input[name='newsletter']")
//还有不等于，复合属性等

（四）子元素选择器

1、匹配第一个子元素

$("ul li:first-child")

2、匹配最后一个子元素

$("ul li:last-child")

3、匹配其父元素下的第N个子或奇偶元素

$("ul li:nth-child(2)")
//索引从1开始

4、父元素中唯一的子元素

$("ul li:only-child")

（五）表单选择器

1、匹配所有 input, textarea, select 和 button 元素

$(":input")

2、匹配所有的单行文本框

$(":text")

3、匹配所有密码框

在这里插入代码片

$(":password")

4、匹配所有单选按钮

$(":radio")

5、匹配所有复选框

$(":checkbox")

6、匹配所有提交按钮

$(":submit")

7、匹配所有图像域

$(":image")

8、匹配所有重置按钮

$(":reset")

9、匹配所有按钮

$(":button")

10、匹配所有文件域

$(":file")

11、所有不可见元素

$("tr:hidden")

12、匹配所有可用元素

$("input:enabled")

13、匹配所有不可用元素

$("input:disabled")

14、匹配所有选中的被选中元素

$("input:checked")
//select中的option

15、匹配所有选中的option元素

$("select option:selected")

三、常用的工具方法

（一）$.each()

遍历数组或对象中的数据

$.each(person, function (key, value) {
    console.log(key, value)
})

（二）$.trim()

去除字符串两边的空格

$.trim("      zihcao   ")

（三）$.type(obj)

得到数据的类型

console.log($.type($) === "function")

（四）$.isArray(obj)

判断是否是数组

console.log($.isArray([]))

（五）$.isFunction(obj)

判断是否是函数

console.log($.isFunction($)) //true

（六）$.parseJSON(json)

解析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数组

四、属性

（一）操作任意属性

1、attr()

设置或返回被选元素的属性值。

//读取第一个div的title属性
console.log($('div:first').attr('title'))
//给所有的div设置name属性
$('div').attr('name', 'zichao)

2、removeAttr()

从每一个匹配的元素中删除一个属性

//移除所有div的title属性
$('div').removeAttr('title')

3、prop()

获取在匹配的元素集中的第一个元素的属性值。

和attr一致

attr(): //操作属性值为非布尔值的属性
prop(): //专门操作属性值为布尔值的属性

4、removeProp()

用来删除由.prop()方法设置的属性集

$para.removeProp("checked");

（二）操作class属性

1、addClass()

为每个匹配的元素添加指定的类名

//给所有的div添加class='abc'
$('div').addClass('abc')

2、removeClass()

从所有匹配的元素中删除全部或者指定的类。

//6. 移除所有div的guiguClass的class
$('div').removeClass('zichao')

3、toggleClass()

如果存在（不存在）就删除（添加）一个类。

$(this).toggleClass("name");

（三）操作HTML代码/文本/值

1、html()

取得或设置第一个匹配元素的html内容

//得到最后一个li的标签体文本
console.log($('li:last').html())
//设置第一个li的标签体为"<h1>m</h1>"
$('li:first').html('<h1>m</h1>')

2、val()

取得或设置第一个匹配元素的value内容

//得到输入框中的value值
console.log($(':text').val()) // 读取
//将输入框的值设置为zichao
$(':text').val('zichao') // 设置

3、取得所有匹配元素的内容

//获取
$('p').text()
//设置
$("p").text("Hello world!")

四、CSS

（一）获取设置样式

1、css()

设置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
})

（二）获取/设置标签的位置数据

1、offset()

相对页面左上角的坐标

//获取
var offset1 = $('.div1').offset()
console.log(offset1.left, offset1.top)
//设置
$('.div2').offset({
        left: 20,
        top: 40
})

2、position()

相对于父元素左上角的坐标

//获取
var position1 = $('.div1').position()
console.log(position1.left, position1.top)
//设置
$('.div2').position({
        left: 20,
        top: 40
})

（三）元素滚动

1、scrollTop()

读取/设置滚动条的Y坐标

//获取
$('body').scrollTop()
//设置
$('body').scrollTop(60)

2、scrollLeft()

读取/设置滚动条的X坐标

//获取
$('body').scrollLeft()
//设置
$('body').scrollLeft(60)

（四）元素的尺寸

1、内容尺寸

height(): height

width(): width

console.log($div.width(), $div.height())

2、内部尺寸

innerHeight(): height padding

innerWidth(): width padding

console.log($div.innerWidth(), $div.innerHeight())

3、外部尺寸

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对象中的元素对象数组中过滤出一部分元素来

（一）first()

获取第一个

var $lis = $('ul>li')
//ul下li标签第一个
$lis.first().css('background', 'red')

（二）last()

获取最后一个

var $lis = $('ul>li')
//ul下li标签的最后一个
$lis.last().css('background', 'red')

（三）eq()

获取第N个元素

var $lis = $('ul>li')
//ul下li标签的第二个
$lis.eq(1).css('background', 'red')

（四）filter()

筛选出与指定表达式匹配的元素集合

var $lis = $('ul>li')
//ul下li标签中title属性为hello的
$lis.filter('[title=hello]').css('background', 'red')

（五）not()

删除与指定表达式匹配的元素

var $lis = $('ul>li')
//ul下li标签中title属性不为hello的
$lis.not('[title=hello]').css('background', 'red')

（六） has()

保留包含特定后代的元素，去掉那些不含有指定后代的元素

var $lis = $('ul>li')
//ul下li标签中有span子标签的
$lis.has('span').css('background', 'red')

六、查找

（一）children()

子标签中找

var $ul = $('ul')
//ul标签的第2个span子标签
$ul.children('span:eq(1)').css('background', 'red')

（二）find()

后代标签中找

var $ul = $('ul')
//ul标签的第2个span后代标签
$ul.find('span:eq(1)').css('background', 'red')

（三）parent()

父标签

var $ul = $('ul')
//ul标签的父标签
$ul.parent().css('background', 'red')

（四）prevAll()

前面所有的兄弟标签

var $li = $('#cc')
//id为cc的li标签的前面的所有li标签
$li.prevAll('li').css('background', 'red')

（五）nextAll()

后面所有的兄弟标签

var $li = $('#cc')
//id为cc的li标签的后面的所有li标签
$li.nextAll('li').css('background', 'red')

（六）siblings()

前后所有的兄弟标签

var $li = $('#cc')
//id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')

七、文档操作

（一）append(content)

向当前匹配的所有元素内部的最后插入指定内容

//向id为ul1的ul下添加一个span(最后)
var $ul1 = $('#ul1')
$ul1.append('<span>append()添加的span</span>')

（二）prepend(content)

向当前匹配的所有元素内部的最前面插入指定内容

//向id为ul1的ul下添加一个span(最前)
$ul1.prepend('<span>prepend()添加的span</span>')

（三）before(content)

将指定内容插入到当前所有匹配元素的前面

//在id为ul1的ul下的li(title为hello)的前面添加span
$ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

（四）after(content)

将指定内容插入到当前所有匹配元素的后面替换节点

//在id为ul1的ul下的li(title为hello)的后面添加span
$ul1.children('li[title=hello]').after('<span>after()添加的span</span>')

（五）replaceWith(content)

用指定内容替换所有匹配的标签删除节点

//将在id为ul2的ul下的li(title为hello)全部替换为p
$('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')

（六）empty()

删除所有匹配元素的子元素

//移除id为ul2的ul下的所有li
$('#ul2').empty()  // li的子元素也会删除

（七）remove()

删除所有匹配的元素

//移除id为ul2的ul下的所有li
$('#ul2>li').remove()

八、事件

（一）事件绑定(2种)：

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()

（五）事件的委派

1、事件委托(委派/代理)

将多个子元素(li)的事件监听委托给父辈元素(ul)处理监听回调是加在了父辈元素上，当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)，父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2、使用事件委托的好处

添加新的子元素, 自动有事件响应处理
减少事件监听的数量
jQuery的事件委托API

3、设置

设置事件委托

$(parentSelector).delegate(childrenSelector, eventName, callback)

移除事件委托

$(parentSelector).undelegate(eventName)

九、动画

（一）淡入淡出

不断改变元素的透明度(opacity)来实现的

1、fadeIn()

带动画的显示

$div1.fadeIn(1000, function () {
    })

2、fadeOut()

带动画隐藏

$div1.fadeOut(1000, function () {
    })

3、fadeToggle()

带动画切换显示/隐藏

$div1.fadeToggle(1000, function () {
    })

（二）滑动动画

不断改变元素的高度实现

1、slideDown()

带动画的展开

$div1.slideDown()

2、slideUp()

带动画的收缩

$div1.slideUp(3000)

3、slideToggle()

带动画的切换展开/收缩

$div1.slideToggle()

（三）显示隐藏

默认没有动画, 动画(opacity/height/width)

1、show()

(不)带动画的显示

$div1.show()//不带动画
$div1.show(1000)//带动画

2、hide()

(不)带动画的隐藏

$div1.hide()//不带动画
$div1.hide(1000)//带动画

3、toggle()

(不)带动画的切换显示/隐藏

$div1.toggle()//不带动画
$div1.toggle(1000)//带动画

（四）自定义动画

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

1、animate()

自定义动画效果的动画

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

2、stop()

停止动画

//停止div1动画
$div1.stop()

这篇好文章是转载于：学新通技术网