jQuery 小结
什么是jQuery？
是一个JavaScript库,本质就是一个js文件, 旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
jQuery的使用步骤
下载
引入
<script src="jquery-3.6.0.min.js"> </script>
按照语法使用
jQuery的使用
通过jQuery创建标签
-
创建标签
语法：
$('html标签') -
将创建的标签添加到指定父容器中
语法：
父元素jQueray对象.append(创建标签)
const div = $('<div>我是div</div>')
div.css({'color': 'red'})
$('body').append(div)
通过 jQuery 获取标签
语法：$('css选择器')
<div class="box">
<input type="button" value="点击" class="btn">
</div>
let div = $('div')
let ipt = $('.box input')
通过jQuery给标签注册事件
-
直接注册事件
a) 获取标签：jQuery对象
b)
jQuery对象.事件类型（function(){}）
let div = $('div')
div.click(function(){
console.log(123)
})
-
通过委托注册事件：依然要给父元素注册事件,通过选择器直接选中事件源(不需要做条件判断)
语法：
父jQuery对象.on('事件类型', '选择器', function(){})
div.on('click', '.btn', function(){
// this:事件源，btn
console.log(222, this)
// this是事件源，是一个DOM对象，
// 如果DOM对象要是用jQuery中提供的方法，需要将DOM对象转为jQuery对象
// 将DOM对象转为jQuery对象方法： $(DOM对象)
$(this).css({'background-color' : 'yellow'})
})
jQuery 特点: 隐式迭代 + 链式编程
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
-
隐式迭代 ：所有符合选择器条件的元素都会执行代码
// 获取 // 注意获取到是 所有button标签 [button, button, button, button, button, prevObject: S.fn.init(1)] const btn = $('button') // 点击每个按钮 都可以弹框123 btn.click(function () { alert(123) }) -
链式编程
语法：
jQuery对象.事件(function () {}) .事件(function () {}) .事件(function () {})根据触发方式，执行对应事件函数
// 获取元素 const btn = $('button') btn.click(function(){ console.log('链式编程') }).mouseenter(function(){ console.log('mouseenter') }).mouseleave(function(){ console.log('mouseleave') })
通过jQuery操作标签样式
div {
width: 100px;
height: 100px;
color: pink;
background-color: red;
}
<div> 这是一div </div>
-
操作行内样式
css(name|pro|[,val|fn]):访问或设置匹配元素的样式属性
参数 类型 含义 name String 要访问的属性名称 name Array 一个或多个CSS属性组成的一个数组 properties Map 要设置为样式属性的属性名/值对 name,value String,Number 属性名,属性值 name,function(index,value) String,Function 1.属性名
2.此函数返回要设置的属性值。
index为元素在对象集合中的索引位置，value是原先的属性值。语法：
jQuery对象.css('css属性')jquery对象.css({'css属性': '值','css属性': '值'})jQuery对象.css('css属性','值')jQuery对象.css('css属性',function(index,value))const div = $('div') console.log(div.css('color'))//rgb(255, 192, 203) console.log(div.css('width'))//100px div.css({ 'width': '200px', 'height': '200px', 'background': 'pink' }) div.css('font-size','20px') // jQuery对象.css('css属性',function(index,value)) // index为元素在对象集合中的索引位置，value是原先的属性值。 // 返回要设置的属性值 // 逐渐增加div的大小 div.click(function(){ $(this).css({ width: function(index, value){ // 返回值赋值给width return parseFloat(value)*1.2 }, height: function(index, value){ return parseFloat(value)*1.2 }, }) }) -
操作类样式
语法：
a) 添加类样式jQuery对象.addClass('类名')
b) 删除类样式jQuery对象.removeClass('类名')
c) 切换类样式jQuery对象.toggleClass('类名')const div = $('div') div.addClass('box') div.removeClass('box') div.toggleClass('box')
通过jQuery操作标签属性
attr(name|pro|key,val|fn)：设置或获取元素自定义的属性值
自己给元素添加的属性，称为是自定义属性，比如给li添加index=“1”。
prop(name|pro|key,val|fn)：设置或获取元素固有的属性值。
固有属性就是元素本身自带的属性，比如链接a里的href属性，input里的type属性等。
attr()与prop()使用区别：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
语法：
jQuery对象.attr('属性名')
jquery对象.attr({'属性名': '值','属性名': '值'})
jQuery对象.attr('属性名','值')
jQuery对象.attr('属性名',function(index,value))
<img src="./images/1.webp" alt="">
const img = $('img')
console.log(img.attr('src'))//./images/1.webp
img.attr({ src: "./images/2.webp", alt: "Test Image" })
img.attr("src","./images/1.webp")
// 把src属性的值设置为title属性的值。
img.attr("title", function() { return this.src })
注：所有”设置属性”操作针对的是当前jQuery对象所匹配的每一个元素；所有”读取属性”的操作只针对第一个匹配的元素。
1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）
2. attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。）
3. attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）
4.attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用’class’或者’id’。)
通过jQuery操作标签内容: 获取内容 + 设置内容
<form>
<input type="text" value="1111" name="username">
<textarea name="content" id="" cols="30" rows="10">'hahhahahahaha' </textarea>
</form>
<p>
ppp
<span>ssss</span>
</p>
-
获取内容
a)获取表单元素中的内容：
语法：
jQuery对象.value()获取表单域内容：
语法:
jQuery对象.serialize()const inp = $('input') const form = $('form') console.log(inp.val())//1111 console.log(form.serialize())//username=1111&content='hahhahahahaha'- .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合(表单域)的 jQuery 对象。
- .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 input, textarea 以及 select。不过，选择 form标签本身进行序列化一般更容易些
- 只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
- form里面的name不能够用 Js、jquery里的关键字。
b)获取非表单元素中的内容：
语法：
jQuery对象.text()jQuery对象.html()const p = $('p') console.log(p.text()) /*上面??打印结果 ppp ssss */ console.log(p.html()) /*上面??打印结果 ppp <span>ssss</span> */ -
设置内容
a)设置表单元素中的内容：
语法：
jQuery对象.value(值)const ipt = $('input') const form = $('form') ipt.val(333) console.log(ipt.val())//333 console.log(form.serialize())//username=333&content='hahhahahahaha'b)设置非表单元素中的内容：
语法：
jQuery对象.text(值)jQuery对象.html(值)const p = $('p') p.text('11111<a href="#">hahahahaha</a>') console.log(p.text())//11111<a href="#">hahahahaha</a> console.log(p.html())//11111<a href="#">hahahahaha</a> p.html('11111<a href="#">hahahahaha</a>') console.log(p.text())//11111hahahahaha console.log(p.html())//11111<a href="#">hahahahaha</a>
jQuery根据标签的关系获取元素
<div>
<p>文字</p>
<p>
<span>文字2</span>
</p>
<h2>123123</h2>
<input type="text">
<a href="#"></a>
</div>
-
根据子元素获取父元素
a)获取直接父元素(亲爹)：
子jQuery对象.parent()b)获取当前元素所有上级元素：
子jQuery对象.parents()c)获取当前元素所有指定的上级元素（满足选择器要求的）：
子jQuery对象.parents('选择器')const p = $('p') console.log(p.parent()) console.log(p.parents()) console.log(p.parents('div')) -
根据父元素获取子元素
a)获取所有直接子元素(亲儿子)：
父jQuery对象.children('选择器')b)获取所有指定子元素(亲儿子)：
父jQuery对象.children('选择器')c)根据选择器获取对应的后代元素(可以是子元素，也可以是子元素的子元素)
父jQuery对象.find('选择器')let div = $('div') console.log(div.children()) console.log(div.children('p')) console.log(div.find('span')) -
获取兄弟关系标签
a)获取所有兄弟关系元素(同层,同级)
jQuery对象.siblings()b)获取当前标签指定的兄弟元素
jQuery对象.siblings('选择器')const h2 = $('h2') console.log(h2.siblings()) console.log(h2.siblings('a'))
jQuery对象控制元素显示和隐藏
语法：
jQuery显示元素语法 ：jQuery对象.show()
jQuery隐藏元素语法 : jQuery对象.hide()
jQuery显示和隐藏切换: jQuery对象.toggle()
<div></div>
<input type="button" value="点击" class="btn">
const btn = $('input')
const div = $('div')
div.css({
'width': '200px',
'height': '200px',
'background': 'pink',
})
btn.click(function(){
// div.toggle()
div.hide(1000, 'linear',function(){
console.log('动画执行完毕')
})
// div.show()
})
// 第一个参数 动画时长, 运动曲线方式, 执行完毕后执行.....
//jQuery对象.hide('1000', linner, function () {})
通过 jQuery 获取元素的索引
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
-
获取元素索引号
语法：
jQuery对象.index()const li = $('li') li.click(function(){ const num = $(this).index() console.log(num) })注意: ❗ this 是 dom 对象, jquery 方法不能直接使用，需要先转为jQuery对象： $(this)
-
根据索引号,获取对应元素
语法：
jQuery对象.eq(索引号)const item = $('li').eq(2) item.text('修改') item.css({'color': 'red'})根据索引获取元素是jQuery对象