jQuery

最新推荐文章于 2024-05-23 11:23:05 发布
最新推荐文章于 2024-05-23 11:23:05 发布
阅读量101 收藏 2
点赞数
分类专栏： js 文章标签： jquery html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beekim/article/details/119998602
版权

jQuery

1.简介

jQuery是一个封装的库，也可以成为一个框架，将js中复杂的方法进行封装改良，让开发人员更加专注于逻辑开发。

jQuery使用时必须进行引入：

  1. 引入本地js文件
  2. CDN加载（引入在线的网址，网址上具有框架）https://www.jq22.com/cdn/
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

jQuery特点：不用考虑兼容问题，已经被封装好了,但是仅封装了DOM的操作

文档:https://jquery.cuishifeng.cn/index.html

2.选择器

2.1基本筛选

$('#box').css('color','green')

$('ul li:first').css('color','red')

$('ul li:last').css('color','red')

//小于指定下标 lt(index) index从0开始
$('ul li:lt(3)').css('border','1px solid blue')

//大于
$('ul li:gt(4)').css('border','1px solid green')

//even匹配所有的偶数行，从0开始
$('ul li:even').css('background','pink')

//匹配基数行，从0开始
$('ul li:odd').css('background','orange')

//eq(index) 找到指定的某一个元素
$('ul li:eq(2)').css('background','red')

//$('ul li:not(2)').css('background','yellow')
//选择所有的标题标签 :header

2.2属性选择器

$('input[type="text"]').css('border','1px solid red')

$('input[name!="hu"]').css('border','1px solid purple')
//匹配以..开头的
$('input[name^="hu"]').css('border','1px solid green')
//匹配以..结尾的
$('input[name$="ao"]').css('border','3px solid black')

//包含
$('input[name*="u"]').css('border','3px solid skyblue')

3.属性

attr()
removeAttr()
prop()

addClass()
removeClass()
toggleClass()

html()
text()
val()

3.1属性

.active{
    color: gold;
}
.active2{
    background-color: #008000;
}

<p name='txt' >不动鸣神泡影断灭</p>

//attr()获取，设置，修改属性
console.log($('p').attr('name'))//txt

$('p').attr('class','active')

$('p').attr('name','cents')
console.log($('p').attr('name'))//cents

// removeAttr()移除
// setTimeout(function(){
// 	$('p').removeAttr('class')
// },1000)

//prop匹配第一个
//console.log($('p').prop('class'))
console.log($('p').prop({class:'active2'}))

//移除不了
setTimeout(function(){
    $('p').removeProp('class','active2')
},1000)

image-20210830130037253

3.2css类

color: greenyellow;
}
p.active{
color: gold;
}

<button type="button">点击切换</button>
<p>不动鸣神泡影断灭</p>

$('button').click(function(){
    console.log($('p').hasClass('active'))
    //var res=$('p').hasClass('active')
    // if(res){
    // 	$('p').removeClass('active')
    // }
    // else{
    // 	$('p').addClass('active')
    // }

    //上述代码和下面代码一样
    $('p').toggleClass('active')

3.3html

<div>
    <p>不动鸣神泡影断灭</p>
</div>

//html() 相当于 innerHTML
var txt=$('div').html()
console.log(txt)//<p>不动鸣神泡影断灭</p>	

var txt=$('div').text()
console.log(txt)//不动鸣神泡影断灭


var txt=$('div').text('胡桃胡桃')

//val()获取输入框和文本框的值

//原生js
// var input=document.querySelector('input')
// input.οnblur=function(){
// 	console.log(input.value)
// }

//jq
$('input').blur(function(){
    console.log($('input').val())
})

image-20210830130821457

image-20210830130832863

4.CSS

css()

offset()
position()
scrollTop()
scrollLeft()

width()
height()
...

4.1css

xx.css('color','red') or xx.css({color:'red',width:100+'px'})

4.2位置

//offset()获取相对于视口的偏移，返回一个对象
console.log($('div').offset())//{top: 50, left: 108}

//position()相对父元素的偏移，要写定位
console.log($('.box').position())//{top: 50, left: 108}

console.log($('.box2').position())//{top: 50, left: 108}


$(document).scroll(function(){
    var val=$(document).scrollTop()
    console.log(val)

    var val=$(document).scrollLeft()
    console.log(val)

})

4.3尺寸

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

5.筛选

<ul>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

//end回到上一个破坏性操作
$('ul li').first().css({background:'red'}).end().last().css({background:'green'})
$('ul li').first().css({color:'gold'}).parent().find('li').last().css({color:'blue'})

image-20210830125714444

6.效果

1基本

show()
hide()
toggle()

.box{
    width: 200px;
    height: 200px;
    background: orange;
}

<button type="button">show</button>
<button type="button">hide</button>
<button type="button">toggle</button>
<div class="box"></div>

$(function(){
    //显示
    $('button').eq(0).click(function(){
        $('.box').show()
    })
    //隐藏
    $('button').eq(1).click(function(){
        $('.box').hide()
    })
    //切换
    $('button').eq(2).click(function(){
      		/*
			参数：
			speed:slow normal fast
			$('.box').toggle('slow')
			
			$('.box').toggle('1000')
			
			$('.box').toggle('1000',function(){
				console.log('动画完成')
			})
		*/
        $('.box').toggle('1000',function(){
            console.log('动画完成')
        })
    })
})

效果演示：

2滑动

slideDown():高度增加【！】
slideUp():高度收缩
slideToggle():切换

.box{
    width: 200px;
    height: 200px;
    background: orange;
}

<button type="button">sildeDown</button>
<button type="button">slideUp</button>
<button type="button">toggle</button>
<div class="box"></div>

$(function(){

    //显示
    $('button').eq(0).click(function(){
        $('.box').slideDown()
    })
    //隐藏
    $('button').eq(1).click(function(){
        $('.box').slideUp()
    })
    //切换
    $('button').eq(2).click(function(){
      	/*
		参数：
		speed:slow normal fast
		$('.box').slideToggle('slow')
		
		$('.box').slideToggle('1000')
		
		$('.box').slideToggle('1000',function(){
			console.log('动画完成')
		})
	*/
        $('.box').slideToggle('1000',function(){
            console.log('动画完成')
        })
    })
})

3淡入淡出

fadeIn()
fadeOut()
fadeTo()
fadeToggle()

.box{
    width: 200px;
    height: 200px;
    background: orange;
}

<button type="button">fadeIn</button>
<button type="button">fadeOut</button>
<button type="button">fadeTo</button>
<button type="button">fadeToggle</button>
<div class="box"></div>

$(function(){

    //淡入
    $('button').eq(0).click(function(){
        $('.box').fadeIn()
    })
    //淡出
    $('button').eq(1).click(function(){
        $('.box').fadeOut()
    })
    //调整不透明度,参数opacity
    $('button').eq(2).click(function(){

        $('.box').fadeTo('1000',0.1,function(){
            console.log('动画完成')
        })
    })//切换
    $('button').eq(3).click(function(){

        $('.box').fadeToggle('1000',function(){
            console.log('动画完成')
        })
    })
})

4自义定

animate()
stop()
delay()
finish()

animate()

.box{
    width: 200px;
    height: 200px;
    background: orange;
    position: absolute;
    left: 0;
    top: 30px;
}

<button type="button">开始动画</button>
<button type="button">结束</button>
<button type="button">finish</button>
<div class="box"></div>

$(function(){
    $('button').eq(0).click(function(){
        //animate(params,speed,)
        // $('.box').animate({opacity:'0.5',borderRadius:'50%',left:'300px'},1000)
        // $('.box').animate({opacity:'0.5',borderRadius:'50%'},1000).animate({left:'300px'},500)
        //设置延迟
        $('.box').animate({opacity:'0.5',borderRadius:'50%'},1000).delay(1000).animate({left:'300px'},500)
    })

效果演示：

stop()

  • stop() == stop(false,false) 停止当前正在执行的动画，立即执行下一个动画
  • stop(false,true) 立即完成当前动画，并立即执行下一个动画
  • stop(true) == stop(true,false) 立即停止当前动画，取消下一个动画
  • stop(true,true) 立即完成当前动画，取消下一个动画

第一个参数为false：则为立即执行下一个动画，true则为立即取消下一个动画
第二个参数为false：则为立即结束当前正在执行的动画，true则为立即完成当前执行的动画

$('button').eq(1).click(function(){


    // $('.box').stop()

     $('.box').stop(false,true)//立即完成当前动画，并立即执行下一个动画

   // $('.box').stop(true,true)
})

效果演示：

finish()

清空所有动画，直接到完成后的动画位置

$('button').eq(2).click(function(){
    $('.box').finish()//清空所有动画，直接到完成后的动画位置
})

7.文档处理

7.1内部插入

append()
appendTo()
prenpend()
prependTo()

<div><h1>attention</h1></div>

<ul></ul>
<li>韶光抚月，天下人间</li>
<li>韶光抚月，天下人间</li>
<li>韶光抚月，天下人间</li>
<li>韶光抚月，天下人间</li>
<li>韶光抚月，天下人间</li>

//append()在内部后面追加内容
$('ul li').append(',2.1前瞻今晚九点直播')

//appendTo(将所有匹配到的元素追加到指定的集合中)
$('li').appendTo($('ul'))

//prepend()在内部内容的前面追加
$('li').prepend('原神--')

//prependTo()所有匹配到的元素前置到指定集合中
$('li').prependTo($('div'))

image-20210830103110464

7.2外部插入

after()
before()
insertAfter()
insertBefore()

<div><h1>重大消息</h1></div>
<ul>
    <li>223233231131321</li>
    <li>223233231131321</li>
    <li>223233231131321</li>
    <li>223233231131321</li>
</ul>

$('ul li').after('<input/>')

image-20210830104022735

$('ul li').before('<input/>')

image-20210830104109162

$('ul').insertAfter('div')

image-20210830104529308

$('ul').insertBefore('div')

image-20210830104558690

7.3包裹

wrap()
unwrap()
wrapAll()
wrapInner()

<li>123135656</li>
<li>123135656</li>
<li>123135656</li>
<li>123135656</li>


//wrap()给每个都包裹上
$('li').wrap('<ul></ul>')

//unwrap()脱掉
$('li').unwrap()

//匹配到的统一加上
$('li').wrapAll('<ul></ul>')

//给内部添加
$('li').wrapInner('<a></a>')

image-20210830104813397

7.4替换

replaceWith()
replaceAll()

<p>31213</p>
<p>31213</p>
<p>31213</p>

$('p').replaceWith('<h2>3333333</h2>')
					
$('<h3>9999999</h3>').replaceAll('h2')

image-20210830105301146

7.4删除和克隆

empty()
remove()
detach()

clone()

<p>31213</p>
<p>31213</p>
<p>31213</p>

<div>clone</div>

//清空匹配的元素内的内容
//$('p').empty()

//移除匹配的元素
//$('p').remove()

//从DOM中删除所有匹配的元素
$('p').detach()

$('div').clone().appendTo('body')

8.事件

on()
off()

hover()

<button type="button">btn</button>

<p>胡桃</p>

//on()绑定一个或多个事件
$('button').on('click mouseover',lis1)

function lis1(){
    console.log(111)
}

//off取消事件
setTimeout(function(){
    $('button').off('mouseover',lis1)
},2000)


$('p').hover(
    //移入
    function(){
        $('p').css({color:'gold'})
    },
    //移出
    function(){
        $('p').css({color:'black'})
    })

9.核心

//each()
$('ul li').each(function(index,value){
    console.log(index,value)
})

//length()获取长度
console.log($('ul li').length)

//get()获取指定下标的元素，返回DOM元素
$('ul li').eq(0).css({color:'gold'})

//jQuery对象转换为js的DOM对象
$('ul li').get(1).style.color="red"

//js的DOM对象转换为jQuery对象
var li=document.querySelectorAll('ul li')
var $li=$('li').eq(2)
$li.css({color:'blue'})

10.补充

//css()获取或者设置css样式
console.log($('div').css('width'))//300px

//设置css ，单个样式
$('div').css('width','200px').css('background','lightblue')

//同时设置多个css样式
$('div').css({height:'200px',background:'orange',borderRadius:'50%'})

//链式操作 ,方便切换对象
$('ul li').css({width:'300px',background:'#ccc',margin:'1px 0px'}).first().css('color','red')

$('ul li').eq(2).css({background:'pink'})

//判断是否具有某个属性，返回一个布尔值
var res =$('ul li').hasClass('active')
console.log(res)


//is适用性更强
var res =$('ul li').is('.active')
console.log(res)

//map遍历
$('ul li').map(function(){
    var value=$(this).html()
    console.log(value)
})

//循环点击事件
$('ul li').click(function(){
    console.log($(this).html())
})


//children()查找指定的子元素
$('div').children('p').css('color','red')

//find()查找到指定元素,包含关系
$('div').find('p').css('color','purple')

//next()相当于 nextSibling
// $('ul li:first').next().css('color','red')
// $('ul li:first').nextUntil('.active').css('color','pink')


$('ul li:last').prev().css('color','red')
$('ul li:last').prevUntil('.active2').css('color','pink')


//siblings()查找所有的兄弟

$('ul li.active').siblings().css({border:'2px solid orange'})
键.
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4555
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
jQuery 效果
LUXCC6的博客
12-02 231
一、显示隐藏 二、滑入滑出 三、淡入淡出 四、自定义动画
$("button").button("loading") 无效
qq_44927883的博客
03-26 2007
bootstrap 4.1.3 版本好像不行 换成3.3.7又行了。。。
JQuery的引用
zwjl1017的博客
04-01 3955
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3316
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4151
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3624
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 4978
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 4913
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jquery 3.5.1
10-27
jquery-3.5.1包含 jquery-3.5.1.js、 jquery-3.5.1.min.js两个文件
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
前端基础入门三大核心之HTML篇：无序列表的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 882
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
媒体查询：响应式设计的核心
aike13ky的博客
05-21 306
媒体查询是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、设备类型、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕尺寸自动调整页面的布局、字体大小、图片尺寸等，从而为用户提供更加舒适和便捷的浏览体验。规则来定义条件表达式。条件表达式可以是设备的媒体类型（如。媒体查询的语法非常简洁明了，它使用。等）以及逻辑运算符（如。等）、设备的特性（如。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1072
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
Html中，想利用JS引入Jquery文件；$.getScript()无效
最新发布
小洪帽i的博客
05-23 225
Html中，想利用JS引入Jquery文件；$.getScript()无效

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值