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)
})
  1. 通过委托注册事件:依然要给父元素注册事件,通过选择器直接选中事件源(不需要做条件判断)

    语法:父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对象

posted @   丫丫learning  阅读(17)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示