jQuery 小结

什么是jQuery？

是一个JavaScript库,本质就是一个js文件,  旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

jQuery的使用步骤

下载

引入

<script src="jquery-3.6.0.min.js">  </script>

按照语法使用

jQuery的使用

通过jQuery创建标签

1. 创建标签

   语法：$('html标签')

2. 将创建的标签添加到指定父容器中

   语法：父元素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给标签注册事件

1. 直接注册事件

   a) 获取标签：jQuery对象

   b)jQuery对象.事件类型（function(){}）

let div = $('div')
div.click(function(){
  console.log(123)
})

2. 通过委托注册事件：依然要给父元素注册事件,通过选择器直接选中事件源(不需要做条件判断)

   语法：父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>

1. 隐式迭代 ：所有符合选择器条件的元素都会执行代码

   // 获取    
   // 注意获取到是  所有button标签    [button, button, button, button, button, prevObject: S.fn.init(1)]
   const btn = $('button')  
   
   // 点击每个按钮  都可以弹框123
   btn.click(function () {
     alert(123)
   })
   

2. 链式编程

   语法： 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>

1. 操作行内样式

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

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>

1. 获取内容

   a)获取表单元素中的内容：

   语法：jQuery对象.value()

   获取表单域内容：

   语法: jQuery对象.serialize()

   const inp = $('input')
   const form = $('form')
   console.log(inp.val())//1111
   console.log(form.serialize())//username=1111&content='hahhahahahaha'
   

   1. .serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合(表单域)的 jQuery 对象。
   2. .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 input, textarea 以及 select。不过，选择 form标签本身进行序列化一般更容易些
   3. 只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。
   4. 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>
   */
   

2. 设置内容

   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&lt;a href="#"&gt;hahahahaha&lt;/a&gt;
   
   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>

1. 根据子元素获取父元素

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

2. 根据父元素获取子元素

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

3. 获取兄弟关系标签

   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>

1. 获取元素索引号

   语法：jQuery对象.index()

   const li = $('li')
   li.click(function(){
     const num = $(this).index()
     console.log(num)
   })
   

   注意: ❗ this 是 dom 对象, jquery 方法不能直接使用，需要先转为jQuery对象： $(this)

2. 根据索引号,获取对应元素

   语法：jQuery对象.eq(索引号)

   const item = $('li').eq(2)
   item.text('修改')
   item.css({'color': 'red'})
   

   根据索引获取元素是jQuery对象