活动地址:CSDN21天学习挑战赛
文章目录
学习目录
1、JQuery介绍
2、JQuery操作HTML属性
3、JQuery操作CSS样式
4、JQuery事件
5、JQuery动画
1、jQuery介绍
JQuery是JavaScript的一个衍生库,也是一个JS文件 JQ中封装了很多方法
让使用变得十分简单,不需要像JS那样大量调用
但是JQ也有许多功能还未实现
因此能够使用JQ做的事情JS也能做,但是JS能做到的JQ未必可以做到
总体体现出了:写的少 做的多这一特征
我们需要通过官网提供的链接去引用该JS文件
官网地址:(https://www.bootcdn.cn/jquery/)
我们可以直接复制SootCDN官网提供Script标签
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
或者通过官网提供的链接,去指定的网站复制 jQuery 中的所有代码 再进行引用
注意:被链接的 script 标签 中不能书写任何代码
1、在Script中 通过**$( )** 从而声明需要书写JQuery代码 是最重要的方法
该符号可以用来传递CSS选择器、Element、document、Window对象、html字符串符号、字符串对象、函数
注意:
JQuery和JavaScript不能交互使用
例如你使用JS获取的标签只能用于JS、JQuery中获取的元素只能用于JQuery
解决方法 :使用对象转换
2、JQuery对象基本使用方法
首先JQuery对比JavaScript大大提高了代码书写效率
其中通过 text()方法 可以进行html5文本的修改和获取
修改只需在text()括号中传入 需要修改的内容即可
获取无需传入内容
举一反三亦可通过 html()方法实现对html5标签内容的修改
修改案例1:
通过JQuery和JavaScript对如下内容进行修改
<div>CareeBy</div>
<ul>
<li id="li_1">001</li>
<li class="li_2">002</li>
<li>003</li>
</ul>
1、分别使用JQuery和JavaScript实现对li标签中所有文本内容的修改
JavaScript实现 代码如下
<script>
name1=document.getElementsByTagName('li')
name1.innerText="JS 实现文本更改"
// js实现 修改li下所有的内容
name1[0].innerText='666'
name1[1].innerText='666'
name1[2].innerText='666'
</script>
JQuery实现 代码如下
<script>
name2=$('ul li')
name2.text('777')
</script>
2、使用JQuery实现对li标签指定内容进行不同的修改
JQuery实现 代码如下
<script>
// 使用id进行修改
name1=$('#li_1')
name1.text('id')
// 使用类名进行修改
name2=$('.li_2')
name2.text('class')
// 使用索引进行i需改
name3=$('ul li')
name3.eq(2).text(‘eq索引’)
</script>
注意:JQuery中获取索引的方式与JavaScript不同 必须通过JQuery中的eq()方法才可以实现 否则无效
3、JavaScript与JQeury的对象转换
1、JS转换成JQ对象
通过 $( )即可
其中括号中转入需要转换的值或字符串对象即可
代码如下:
<script>
// JavaScript实现 对象转换
// js获取标签
value1=document.getElementsByTagName('li')[0];
// 通过 $() 将需要转换的值传入其中即可完成转换
va=$(value1)
console.log(va.text())// 成功调用jq方法
</script>
2、JQ对象转换成JS对象
只需使用JQ中所提供的 get( ) 方法即可
因为通过JQ获取的对象都是按照索引排序 因此需要在get()方法中传入一个索引代表要转换的值
如果只有一个值则传入零 即可代表当前元素
代码如下:
<script>
// JQuery实现 对象转换
// jq获取标签
value2=$('ul li')
// 通过 JQ中所提供的get方法 进行转换
// 因为JQ获取内容是获取所有内容 所以我们里面传入需要转换的索引即可
// 如果只有一个值 传入零即可
va=value2.get(2).innerText; // 成功调用js方法
console.log(va)
</script>
4、遍历JQuery对象
因为每次使用JQuery获取元素,都是按照数组的形式将元素存储起来
因此JQuery中提供了一个 each()方法用于遍历一个JQuery对象;
使用代码如下::
<script>
// 获取li
vlaues=$("ul li");
vlaues.each(function (i){
// 第一种遍历方法
console.log(vlaues.eq(i).text())
// 第二种遍历方法
// each遍历下的this表示当前遍历的js对象
console.log(this.innerText)
console.log('我是第'+i+1+"个元素")
})
</script>
注意 each()遍历下的this是一个JS对象 如果需要进行JQ对象操作 必须使用$()方法对其转换
5、JQuery常用操作
1、属性
1、attr设置、获取标签属性
2、removeAttr() 移出标签属性
2、类名
1、addClass 设置class名字
2、removeClass 移出类名
3、toggleClass 操作class类名,有则加无则减
JQuery与JavaScrpt的使用差别 | JQuery | Script |
---|---|---|
获取HTML标签 | HTML() | innerHTML() |
获取指定对象文本 | text() | innerText() |
获取表单元素的值 | val() | value() |
3、JQuery获取表单元素中的值 实例
<body>
<div>
<form>
<input type="text" placeholder="请输入账户" class="values">
<br/>
<input type="password" placeholder="请输入密码" class="values">
<br>
<input type="email" placeholder="请输入邮箱" class="values">
<br>
</form>
<button > 点击提交</button>
</div>
<!-- JQuery获取表单元素中的值-->
<script>
btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
values=$('.values')
// 通过 each 循环输出值
values.each(function (i) {
// 通过 eq获取到指定元素再通过 val方法得到表单中的值
console.log(values.eq(i).val())
})
}
</script>
</body>
4、JQuery操作元素属性
注意这里指的元素属性为 Class 和 id
1、只需通过JQuery中的attr()方法里面传入一个需要的属性即可
注意:
1、使用JQuery获取的元素通常是一个数组形式存储的
2、默认显示或输出第一个
3、如果对元素进行修改 则自带遍历 修改获取到的所有元素
代码如下
// 通过Jquery获取标签属性 value1=$(".sp_1").eq(0) console.log(value1.attr("class")) value=$("span") value.each(function (i) { console.log(value.eq(i).attr('class')) })
2、需要修改元素的值只需要在attr()方法中传入两个值即可
1、传入一个需要改变的属性
2、传入一个修改后的值即可
value2.attr('class','box1')
3、removeattr()删除属性
value2.removeAttr('id')
4、addClass() 类名添加
注意
attr()只能对类名进行修改,如果存在多个类名 会全部修改掉
而addClass则是重新添加新的内容
代码如下
value2.addClass('box2') // 只添加不修改
5、removeClass() 类名删除
value2.removeClass('box2')
5、JQuery操作CSS样式
1、获取元素的宽和高
JQuery.width(); 获取宽度
JQuery.heigth(); 获取高度
JQuery.innerwidth(); 获取加上Padding之后的宽度
JQuery.innerHeight(); 获取加上Padding之后的高度
JQuery.outerwidth(); 获取加上Padding和border之后的宽度
JQuery.outerHeight(); 获取加上Padding和border之后的高度
2、修改CSS样式
1、第一种方法 设置单个属性
$('div').css('width','100px')
2、第二种方法 同时设置多个属性
$('div').css({
'width':'100px',
'heigth':'100px',
'background-color':'red',
'color':'white'
})
以键值对的方式进行书写
注意:
两个属性之间使用逗号进行隔开
属性与属性值之间使用冒号隔开
使用第二种方式时 需要在css方法中加入 花括号 {} 从而进行声明
6、JQuery事件
1、单击事件 click()
btn=$('button').eq(0);
btn.click(function(){
alert('单击')
})
2、双击事件 dblclick()
btn=$('button').eq(0);
btn.dblclick(function(){
alert('双击')
})
3、移入移出事件
移入移出有两种实现方法
通过hover()获取通过mouseLeave/mouseEnter
1、通过 hover()方法实现
// 通过 hover实现
hover中传入一个function方法便是移入 两个方法就是移出
btn=$('button').eq(0)
btn.hover(function(){{
// 编辑移入事件
},function(){
// 编辑移出事件
})
2、通过 mouseleave / mouseenter
btn=$('button').eq(0);
btn.mouseenter(function(){
// 编辑移入事件
})
btn.mouseleave(function(){
// 编辑移出事件
})
4、JQuery事件绑定
注意:在JQuery中可以绑定多个事件 通过 on 即可实现
语法:JQ对象 . on( ‘指定事件’ , function(){}方法 )
this关键字:使用事件绑定会提供一个this关键字 表示当前所操作总的对象
因为事件绑定的对象可能存在多个内容,this属于JS对象,需要进行JQ操作,进行转换即可;示例: $(this)
绑定多给事件语法
JQ对象 . on({ ‘事件1’ : function(){} , ‘事件2’ : function(){} , ‘事件3’ : function(){} … })
注意:
事件与执行函数之间使用冒号隔开
事件与事件之间使用逗号隔开
使用多个事件绑定中需要 在on中 加入花括号{} 进行声明
1、绑定一个事件 代码如下
// 事件绑定
btns=$('button')
btns.on('click',function () {
alert(this.innerText='hhh')
})
2、绑定多个事件 代码如下
// 绑定多个事件
btns=$('button')
btns.on({'click':function () {
alert('事件1')
},'mouseenter':function () {
this.innerText='事件2'
}})
3、移除事件
btn_off=$('#btn_off')
btn_off.click(function () {
// 移除全部
btns.off();
//移除指定事件
btns.off('mouseenter')
//移除指定事件
btns.off('click')
})
注意:
移除事件通过 off()方法实现
里面传入的值 为事件的名字
如果没有传入任何值则移除所有的事件
7、JQuery动画
<script>
div_jq=$('.div2').eq(0)
// 隐藏动画
btn=$('button')
btn_1=btn.eq(0)
btn_1.click(function () {
div_jq.hide(1000) // 隐藏
})
btn_2=btn.eq(1)
btn_2.click(function () {
div_jq.show(1000) // 显示
})
btn_3=btn.eq(2)
btn_3.click(function () {
div_jq.toggle(1000)
})
btn_4=btn.eq(3)
btn_4.click(function () {
div_jq.fadeIn(1000) // 淡入
})
btn_5=btn.eq(4)
btn_5.click(function () {
div_jq.fadeOut(1000) // 淡出
})
btn_6=btn.eq(5)
btn_6.click(function () {
div_jq.fadeTo(1000,0.5) //设置透明度
})
btn_7=btn.eq(6)
btn_7.click(function () {
div_jq.slideUp(1000) // 向上收缩
})
btn_8=btn.eq(7)
btn_8.click(function () {
div_jq.slideDown(1000) // 向下打开
})
btn_9=btn.eq(8)
btn_9.click(function () {
div_jq.slideToggle(1000) // 淡入
})
</script>
隐藏:JQuery对象.hide( 动画执行时间 )
显示:JQuery对象.show( 动画执行时间 )
显示/隐藏:JQuery对象.toggle( 动画执行时间 )
淡入:JQuery对象.fadeIn( 动画执行时间 )
淡出:JQuery对象.fadeout( 动画执行时间 )
透明动画:JQuery对象.fadeto( 动画执行时间 )
向上隐藏:JQuery对象.slideUp( 动画执行时间 )
向下显示:JQuery对象.slideDown( 动画执行时间 )
向上隐藏/向下显示:JQuery对象.slideToggle( 动画执行时间 )
8、JQuery的Animate动画
语法:JQuery对象.animate({ CSS改变的样式 } , 运动持续时间 , 动画运动加载方式).delay( 动画加载延迟时间 )
注意:在animate中花括号中输入的CSS样式需要以键值对的方式录入
代码如下
div_animate=$('.div').eq(0)
btn=$('button').eq(0);
btn.click(function () {
// alert(111)
div_animate.animate({
"width":"405px",
"height":"405px",
'top':"100px",
'left':'100px',
'opacity':"0.5" // 设置透明度
},3000,'linear').delay(4000)
})
btn2=$('button').eq(1);
btn2.click(function () {
div_animate.stop()
})