jQuery学习

最新推荐文章于 2024-05-05 23:51:11 发布

Cencus

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量351

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/cencer_heart/article/details/105634162

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

day 01
day02
day 03
day 04

day 01

08 dom对象与jQuery对象

dom对象

var dom = document.getElementById();//原生js获取到的对象就是dom对象

特点：只能调用dom的方法与属性，不能调用jQuery的方法与属性

dom.style.backgroundcolor = 'red';//调用dom的属性与方法
dom.css('backgroundcolor','red');//不能调用dom的方法属性

jQuery对象

利用jQuery获取的对象就是…

var $div01 = $('#one');//通过id
$div01.css()

特点：不能互通的

jQuery对象是一个伪数组，有下标有length但是不是数组

证明：

console.log($div1.__proto__ === Array.__proto__);

09 dom对象与jQuery对象的互相转换

dom -> jQuery ：用$把dom对象包起来

var $obj = $(dom对象);

jQuery -> dom ：1.下标，2.get()；

//method1 ：下标
var div1 = $jQuery对象[下标]//下标0序
//method2 ：get()方法
var div1 = $jQuery对象.get(下标)

11 设置获取文本内容text()

获取文本
```
$('obj').text();
```
注：假如obj有子代，那么也会获取到子代的文本（div下的p）
设置文本
```
$('obj').text("String");
```
注：
- String会覆盖原来的内容，如果设置的文本中包换标签，是不会解析该标签的
- 如果选择器选择了多个,那么都会被设置，并且不会保留子代文本

12 设置获取样式css()

获取样式

格式：$('obj').css('想要获取的样式名');

设置样式
- 设置单个样式

格式：$('obj').css('想要设置的样式名'，'样式值');

设置多个样式

格式:$('obj').css({
 xxx:xxx,
 xxx:xxx
});

13 基本选择器

选择器	用途
$(’#id’)	id选择器
$(.class’)	类选择器
$(‘TagName’)	标签名选择器
$(‘obj1,obj2,obj3’)	并集选择器
$(‘obj1 obj2 obj3’)	交集选择器

14 层次选择器

$('#father > #son')获取ID为father的所有子元素中id为son 的元素

15 过滤选择器

这类选择器都带冒号

名称	用法	描述
:eq(index)	$(“li:eq(2)”).css(‘color’,'red);	从获取的li元素中，选择索引号为2的元素，索引从0开始
:odd	$(“li:odd”).css(‘color’,'red);	奇数
:even	$(“li:even”).css(‘color’,'red);	偶数

属性选择器

筛选选择器（方法）

和过滤选择器类似，但是这个主要是方法

chirdren()，里面不写参数

名称	用法	描述
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul-li’)，子类选择器
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)，后代选择器
siblings(selector)	$(’#first’).siblings(‘li’);	查找兄弟节点，不包括自己本身
parent()	$(’#first’).parent()	查找父亲
eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’),index从0开始
next()	$(‘li’).next()	找下一个兄弟
nextAll()	$(this).nextAll()	找该元素后面的所有元素
prev()	$(‘li’)prev()	找上一个兄弟
prevAll()	$(this).prevAll()	找该元素前面的所有元素

案例：下拉菜单

==mouseover ==事件在鼠标移动选取的元素及其子元素上时触发

==mouseenter ==鼠标只在鼠标移动到选取元素上时触发

//案例：突出显示“
../ 代表当前文件的上一级目录
./” 代表当前文件所在目录
<script src="jquery-3.4.1.js"></script>
<script>
    //获取所在的li
    $(function() {
        //需求1：给小人物加一个鼠标移入时间，当前(this)li的透明度为1，其他兄弟的透明度为0.4
        //需求2：鼠标离开大盒子，所有li的透明度改成1

        $('.wrap').find('li').mouseenter(function() {
            $(this).css('opacity', 1).siblings('li').css('opacity', 0.4);
        })
        $('ul').mouseleave(function() {
            $('ul').find('li').css('opacity', 1);
        })

    });
</script>

.show：显示（相当于display：block）

.hidden：隐藏（相当于display：none）

jquery：隐式迭代，链式编程（在于一个方法返回的是一个jquery对象，就可以继续点jquery方法）

20 淘宝服饰精品

$(‘li’).index()方法获取索引，从0开始

$('.center>li').eq(index)
$('.center>li:eq('+index+')')//做字符串拼接

.show()有返回值，返回本身

.show().siblings().hidden()

属性操作

属性是可以自定义的哦！ * 获取属性

设置属性

.attr(src,‘src’)

通过属性查找

$('li[src="www.baidu.com"]')

添加某个属性

$(selector).attr('属性名','属性值')

移除某个属性

$(selector).removeAttr('属性名')

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        width: 500px;
        height: 200px;
        margin: 100px auto;
        display: flex;
        justify-content: space-around;
        border: 1px solid pink;


    }
    .left,.right,.center{
        list-style: none;
    }
    .left{
        flex:1;
    }
    .center{
        flex:3;

    }
    .right{
        flex:1;
    }
</style>

<body>
    <div class="wrapper">
        <ul class="left">
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
        </ul>
        <ul class="center">
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">8</a></li>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">8</a></li>
        </ul>
        <ul class="right">
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
            <li><a href="">链接</a></li>
        </ul>
    </div>

</body>

</html>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function() {
        //需求1：给左边的li设置鼠标移入事件，让对应的li显示，其他的隐藏
        //需求2：给右边的li设置鼠标移入事件，让对应的li显示，其他的隐藏
        //解决需求1:为什么不给a标签设置鼠标移入时间，而要给li标签
        $('.left>li').mouseenter(function(){
            //获取当前li的索引
            let index = $(this).index();
            console.log($('.center>li').eq(index).show().siblings('li').hide());
        });

        $('.right>li').mouseenter(function(){
            let index = $(this).index();
            index+=$('.left>li').length;
            console.log($('.center>li').eq(index).show().siblings('li').hide());

        })

    });
</script>

day02

Class 类操作

没有button只能用input来实现type

添加类

添加单个类

addClass(类名1)

添加多个类

addClass(类名1 类名2)

移除类

移除单个

.removeClass(类名);

移除多个

移除所有

.removeClass();

判断类

hasClass()：

切换类

.toggleClass()：没有这个类就添加，有就删除

02 案例——tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{
        width: 500px;
        height: 30px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        margin:20px auto;
        background-color: #ccc;

    }
    ul li{
        width: 50px;
        height: 100%;
        background-color: aqua;
    }
    .main{
    	display:none;
    }
    .active{
        border-top: 3px solid red;
    }
    .selected{
    	display:block;
	}
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function(){
        $('ul>li').mouseenter(function(){
            console.log($(this).addClass('active').siblings('li').removeClass('active'))
            let index = $(this).index();
            $('.main').eq(index).addClass('selected').sibling('.main').removeClass('selected')
        })

        $('ul').mouseleave(function(){
            $('li').removeClass('active')
        })
    });
</script>

jquery动画——显示show()隐藏hide()

显示：

显示和隐藏

显示

$('#div1').show('slow')

  1. 如果show没有参数就没有动画效果
  2. 如果想要动画效果就要给他参数：
     * 参数1：代表执行动画的时长可以是毫秒数，也可以是代表时长的三个字符串（fast:200ms normal:400ms slow:600ms）写错了，也行此时相当于Normal
     * 参数2：动画执行完后的回调函数

隐藏

  $('#div1').hide

$(’#div1’).hide(2000);

切换

$('#div1').toggle(1000)//

如果元素隐藏就动画显示，否则反之

有没有回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>
<body>
    <input type="button" value="隐藏" id="hide">
    <input type="button" value="显示" id="show">
    <input type="button" value="切换" id="toggle">
    <div id="div1"></div>
</body>
</html>
<script src="jquery-3.4.1.js"></script>
<script>
    $(function(){
        //1.显示
        $('#show').click(function(){
            //给div1显示出
            //  1.1如果show没有参数就没有动画效果
            //  1.2如果想要动画效果就要给他参数
            /*  参数1：代表执行动画的时长可以是毫秒数，也可以是代表时长的三个字符串（fast:200ms normal:400ms slow:600ms）写错了，也行此时相当于Normal
                参数2：动画执行完后的回调函数
                */
            $('#div1').show('slow');//200ms

            


        })

        //2.隐藏
        $('#hide').click(function(){
            //$('#div1').hide(2000);//
            //回调函数
            $('#div1').hide(2000,function(){
                alert();
            })
        })


        //3.toggle
        //如果元素隐藏就动画显示，否则反之
        $('#toggle').click(function(){
            //$('#div1').hide(2000);//
            //回调函数
            $('#div1').toggle(1000)//
        })


        
    });
</script>

滑入
- slideDown()方法
向下滑动元素

参数1：speed：“slow”,“fast”,ms数，可省略

参数2：回调函数
- slideup()方法
- slideToggle()方法
淡入

fadeIn

自定义动画

.click(function(){
	$('#div1').animate({prop:value},speed)
})

.animate(prop,time,speed,callback)

参数1：必选需要做动画的属性，
参数2：时长，可选
参数3：easing：可选的，代表缓动还是匀速：linear swing
linear:匀速
swing：慢-快-慢
默认：swing
参数4：动画执行完毕后的回调函数：可以在里面又做动画定义

09 动画队列以及stop参数

如果你去鬼畜一个动画，他当前做不了就会加入动画队列，然后就会很鬼畜

方法：stop方法

解法：在同一个元素上执行多个动画，后面的动画会被放到动画队列中，前面的执行完了才会执行

stop(chearQueue,jumpToEnd)

chearQueue：是否清除队列
jumpToEnd:是否跳转到最终效果

不写参数默认两个false

10 动态创建元素-html()和$()

原生js创建节点

document.write( )：打开标准流->添加->关闭
innerHtml：设置内容（包含标签）
document.createElement(‘div’)

JQuery中：

html
$()

html()

设置/获取内容

<input />
<input />
<div id='div1'>
    <p></p>
</div>

获取到元素的所有内容：

$('#div1').html()=><p><span></span></p>

设置内容：

$('#div1').html("我是设置的内容")

会覆盖

$()方法
```
var $link=$('<a></a>')
```
记住：
1. $()里面的参数是字符串，同时像class=“div"这样的里面的”"都可以省略
2. 同时这样创建的元素只存在于内存中，如果要在页面上显示，就一定要追加
```
$("#div1").append($link)
```

14 清空节点empty()与移除节点remove()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery-3.4.1.js"></script>
</head>
<body>
  <input type="button" value="按钮" id="btn" />
  <ul id="ul1">
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li id="li3">我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
  </ul>
</body>
</html>

清空ul里面的所有元素

$("#ul1").html("");

不推荐使用，不安全，li清掉了，但是事件还在，所以可能造成内存泄漏

推荐使用

 $("#ul1").empty();

不仅移除了元素。还清空了元素绑定的事件

移除某一个元素

$("#li3").remove();

看着像自杀,本质还是找到父亲，然后从父亲那边移除孩子

16 克隆节点clone()

day 03

01 JQuery操作属性

02 案例——美女相册

03 prop()操作布尔类型的属性

04 案例——表格全选反选

05 宽高

项	代码
内容	width(),height()
内容+padding	innerWidth()，innerHeight()
内容+padding+border	outerWidth(),outerHeight()
内容+padding+border+margin	outerWidth(true),outerHeight(true)

06 offset()和position()

获取元素距父元素的top和left值
$('selector').position().top
$('selector').postion().left

07 scrollLeft()和scrollTop()

08 案例——固定导航栏

事件处理函数

原生js注册事件

document.getElementById("div1").onclick = function(){
	alert("点击事件")
}
document.getElementById("div1").onclick = function(){
	alert("点击事件 lalala")
}

原生js注册相同事件，后面会覆盖前面的

Jquery注册

$('#one').click(function(){
	alert('点击事件')
})
$('#one').click(function(){
	alert('点击事件啦啦啦')
})

Jquery给同一个元素注册相同的事件，后面的不会覆盖前面的

注意这里不是同时注册而是有先后顺序的

09 JQuery事件发展历程

简单事件绑定.click()

不支持动态注册
不支持同时注册

$('div').click(function(){
	console.log("")
})
$('div').mouseenter(function(){
	console.log("")
})

bind事件绑定

支持同时注册
不支持动态注册

$('div').bind({
	mouseenter:function(){},
	click:function(){}
})

可以接受一个类似于json格式的事件类型与处理程序

delegate

支持同时注册
也支持动态注册

要给父元素注册事件

$('parent').delegate('p','click',function(){});

参数列表解析：(要绑定事件的元素,事件类型,事件处理函数)
缺点：只能注册委托事件，因此注册事件需要记很多方法

$('body').delegate('div',{
	mouseenter:function(){
		console.log("移入")
	},
	click:function(){
		console.log("单击")
	}
})

本质是事件冒泡

10 on统一注册

JQuery 1.7 之后，都用on统一注册，也就是前面的方法都不需要用

on注册简单事件

$(selector).on('click',function(){})

给selector绑定事件
由自己触发
不支持动态绑定

on注册委托事件

$(selector).on('click','span',function(){})

给selector注册绑定代理事件’
支持动态绑定

11 案例——动态数据添加和删除——使用on委托注册事件

12 事件解绑off()

unbind()，了解
undelegate()，了解
off(),，重点掌握

$('selector').off()//移除当前选择元素的所有事件
$('selector').off('click')//移除选择元素的click事件

13 事件触发

代码的方式触发事件
可以使用他来触发自定义事件
可以用于在满足一定条件的时候来触发
$(selector).trigger('事件名')

        $('#one').on('lx',function(){
            $(this).text('谢谢你')
        })

        // 没有触发时机，现在就是要触发怎么办，用trigger，

        $('#btn2').on('click',function(){
            var res = confirm('哈皮');//
            if(res){
                //触发自定义的lx事件
                $('#one').trigger('lx');
            }

        })
    });

14 jQuery事件对象

什么是事件对象

注册一个事件系统就会帮我们生成一个对象记录这个事件触发时候的信息
例如：比如触发事件时有有没有按住某个键,又比如坐标信息…

<!--html部分-->
 <div id="one" class="one">
        <input type="button" id="btn" value="我是按钮">
        <br />
        <a href="https://www.baidu.com">百度一下,你就知道</a>
</div>

$('#one').on('click', function (e) {
            //如何获取事件对象
            //jquery中用事件参数e来获取
            //jquery事件对象是对原生js事件对象的封装，处理好了兼容性

            //2.事件对象中常用的三个坐标
            //触发事件那一点距离屏 幕左上角的值
             console.log("Screen" + e.screenX + " : " + e.screenY);
            //触发事件那一点距离 可视区左上角的值
             console.log("client" + e.clientX + " : " + e.clientY);
            //触发事件那一点距离 页面左上角的值
             console.log("page" + e.pageX + " : " + e.pageY);
            alert("我是div的单击事件。")

        })

$('#btn').on('click',function(e){
            // 也会触发div的单击事件
            alert("我是按钮的单击事件");
            // 阻止事件冒泡
            // 1. 接受事件对象e
            // 2. 调用
            e.stopPropagation();//阻止事件冒泡
        })

$('a').on('click',function(e){
            alert("我是a标签的单击事件");
            // e.stopPropagation();//阻止事件冒泡
            // // 阻止默认行为——阻止a标签的一个跳转
            // e.preventDefault();


            // 既能阻止事件冒泡，又能阻止默认行为
            return false;



        })

5.给页面注册键盘按下事件，e.keyCcode能获取按得是哪个键

        $(document).on('keydown',function(e){
            // console.log(e.keyCode);
            let $div = $('#one');
            offset = 20;
            let $div_left = $div.position().left;
            let $div_top = $div.position().top;
            switch(e.keyCode){
                case 37:$div.css('left',$div_left-=offset);break;
                case 38:$div.css('top',$div_top-=offset);break;
                case 39:$div.css('left',$div_left+=offset);break;
                case 40:$div.css('top',$div_top+=offset);break;
            }
        })

15 案例——按钮变色

day 04

jQuery补充知识点

01 案例——五角心评分

$(selector).on()有返回值，返回的就是对selector，所以又可以链式编程

对next()，prev()的补充，这里补充到前面

属性选择器

页面内跳转的方法：

[要显示的内容](要跳转的id)

eg:
<span id="span"></span>
(这里可以跳转到span)[#span]

02 链式编程与end()

链式编程

什么时候可以链式编程

如果给元素调用一个方法，方法有返回值，并且返回的是一个jquery对象，那就可以继续再点出jquery方法
$('div').width(100).height(100).css('background-color','red')
但是如果返回的是一个数值，而非一个jQuery对象就会报错
$('div').width(100).width().height()：报错，因为$('div').width(100).width()返回的是一个数值，而数值不能点出jquery方法

end方法

end()：回到jQuery上一个状态

$(this).text(sx_sign).prevAll().text(sx_sign).end()//相当于$(this)

但是同样的，语句$('div').width(100).width().end()依然错误，因为返回的是数值无法继续点出jQuery方法

03 显示迭代each()

let $sel = $(selector);
$sel.each(function(index,element){
	//index：索引
	//element：元素，是一个BOM对象

})

04 多库共存

如何查看jQuery版本

JQuery.fn.jquery
$.prototype.jquery
2. 如果引入了多个jQuery文件，那$指代的是谁
后引入谁，就会覆盖之前引入的
3. 如过就是想用前面的怎么办

多库冲突/多库共存问题

提供了一个机制：
JQuery.noconflict()：释放$的控制权，这样$就指代后引入的了
如果又想用怎么办，只要接受返回值就行

var _$ = JQuery.noconflict();

自执行函数

(function(){

}())

06 JQuery插件介绍——颜色插件

什么是插件

插件就是做扩展功能的，就像一部手机本来只有打电话发短信的功能，但是你可以下载app来扩展功能

jq22网址
颜色插件：jquery.color.js

/*
我们知道jquery有个animate方法，
但是里面的backgroundColor会不起作用，
这个时候就需要用到我们的插件了
*/

使用插件的一般流程：

引入jQuery文件
引入插件文件
调用插件方法（一般都有参考文档或者示例）

07 插件使用——省市联动

08 插件的使用——UI插件

09 自己开发JQuery插件

10 自己封装table表格插件

11 自己封装tab栏切换插件

12 封装插件的好处——tab切换

Cencus

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

JQuery的基础知识
复制链接

扫一扫

专栏目录