JQuery从入门到精通(全一章)

最新推荐文章于 2023-03-22 15:12:32 发布

Caree By

最新推荐文章于 2023-03-22 15:12:32 发布

阅读量487

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/GWHMYS/article/details/126109473

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习目录

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