前端学习——jQuery入门篇

2021-04-05 09:29:10 阅读：135 来源： 互联网

一. jQuery入门

1.1 初步感受jQuery

使用jquery简单写个tab切换小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            display: none;
            background: pink;
        }
        .div-active {
            display: block;
        }
        .btn-active {
            background: green;
        }
    </style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button >按钮2</button>
<button >按钮3</button>
<div class="div-active">内容1</div>
<div>内容2</div>
<div>内容3</div>
</body>
<script src="../js/jquery-3.1.0.js"></script>
<script>
    $(function () {
        //找到所有按钮
       $('button').click(function () {
           //找到除了自己意外的兄弟节点
           $(this).addClass('btn-active').siblings('button').removeClass('btn-active');
           $('div').eq($(this).index()).addClass('div-active').siblings('div').removeClass('div-active');
       });
    });
</script>

曾经需要不断加循环的判断的js代码只需要两行代码就可以完成了，是不是很方便

而且我们还发现里面多了美元符号，美元符号是jQuery的一个标志，我们以后会经常和这个美元符号打交道。

同时，我们如果想要使用jQuery的话，我们还需要引入一个js文件，这个js文件是大佬们帮我们封装的很多对于DOM对象操作的代码，而且整个组件库的底层代码都是通过js实现的，所以js是我们学习前端最基础的知识，同时也是知识量最多的，学习其他框架或者组件库都需要了解基本的js知识。

引入的js文件我们可以进入到网站里面去下载这个外部的js文件

https://jquery.com/download/

这个是jQuery组件库的官方网站，jQuery帮我们简化了很多对于DOM对象的操作，直接官方下载然后引入就可以使用了

1.2 初始化函数

onload入口函数

js原生的初始化使用的是onload方法

具体写法如下

window.onload = function () {
	console.log('onload');
}

ready入口函数

这个函数是jquery内的入口函数

具体写法如下

$(document).ready(function () {
    console.log('ready');
});

另一种写法

$(function () {
    console.log('ready的简写形式');
});

两种入口函数的区别是（这个是一个重点）

onload只能有一个，如果存在多个，后面的覆盖前面的，ready函数可以有无数个，按照顺数一次执行(执行次数不同)
ready函数在DOM层渲染完毕则自动执行，onload需要等待页面所有资源加载完毕才执行（执行时机不同）

1.3 DOM对象和jQuery对象转换

DOM对象和jQuery对象两个的方法是不同的

我们需要记住的是DOM对象和jQuery对象相互之间是不能使用对方的属性或者方法的

同时我们需要区分哪个是jQuery对象，哪个是DOM对象

1.3.1 DOM对象转换为jQuery对象

DOM对象转换为jQuery对象其实非常简单

需要使用jQuery的工厂函数来转换，其实说白了就是在DOM对象外面添加上一个美元符号即可

例如以下

let p1 = document.getElementById('p1');

上面的代码是获取id为p1的DOM对象，这个时候我们是没有办法使用所有jQuery帮我们封装的函数和属性的，我们将其转换为jQuery对象，只需要如下操作即可

$(p1);

这样就将DOM对象转换为jQuery对象了

1.3.2 jQuery对象转换为DOM对象

jQuery对象转换为DOM对象其实也不是很难，一共有两种方法

方法一

方法一是直接想数组一样添加下标即可

例如以下

let p1 = $('#p1');

以上是一个id为p1的jQuery元素对象

因为是唯一的，长度为0，所以直接加下标即可

p1[0].innerText = 'jquery转DOM成功!';

这样就可以了

方法二

使用get函数获取下标

p1.get(0).innerText = 'jquery转DOM对象成功!';

这样就完成了jQuery对象转为DOM对象

1.4 jQuery选择器

jQuery获取元素的对象的方法和DOM中querySelector函数获取的方法都是差不多的，都是根据选择器去获取，在这里如果不熟悉的话可以回去复习以下css的选择器，CSS的各种选择器还是挺重要的

改变样式

jQuery改变css样式可以使用函数改变

基本语法

jQuery对象.css('样式名称','样式值');

除了以上的方法，如果我们想要设置多个样式还可以使用以下方法

jQuery对象.css({
	样式名称1: '样式值1',
	样式名称2: '样式值2',
	样式名称3: '样式值3'
});

这样就可以使用jQuery改变html元素的css样式了

而且使用第二种方法浏览器还会有提示，不过使用的是驼峰命名法

例如在css中属性名为： background-color的属性名，在jQuery中会使用backgroundColor

给标签设置值

给标签设置值在DOM对象中使用的是innerText和innerHTML，在jQuery中可以使用text()来获取

text()函数不仅仅可以获取值，还可以设置值

基本语法

$('#p1').text();//获取p1标签里面的值

$('#p1').text('我可以给id为p1的标签设置值');//给id为p1的标签设置值

单标签赋值

在html中有些单标签没有办法通过text来赋值或者取值，所以就需要另一个函数来进行赋值或者取值

可以通过val函数来对单标签进行取值或者赋值的操作

基本语法

$('input').val();//获取input标签里面的value值

$('input').val('给input标签里面的value进行赋值');

子代选择器的使用

jQuery使用子代选择器就像是css样式表使用子代选择器一样

基本语法

$('#d1>p').css('color','red');//给id为d1下面的p标签的字体颜色设置为red

这里设置的仅仅是一层的标签，而不是id为d1下的所有p标签

在jQuery中还有一个方法可以达到相同的效果

children()函数

基本语法

$('#d1').children('p').css('color','blue');

这里是给id为d1下面的p标签的字体颜色设置为red

后代选择器的使用

和上面一样，调用方式也和css里面的一样

基本语法

$("#d1 p").css('color','red');

这里是找到id为d1下面的所有p标签进行设置颜色

jQuery中同样也有一个方法可以完成这个效果

find()函数

基本语法

$('#d1').find('p').css('color','red');

这里是找到id为d1下面的所有p标签进行设置颜色

查找子级标签

查找p1下一个标签,满足条件是两个标签都是相同的,而且只能找到下一个相同的标签

也就是需要满足两个标签相同，且下一个标签就是我们需要寻找的标签

基本语法

$('#p1+p').css('color','red');

在jQuery中另一个方法为

$('#p1').next().css('color','blue');

查找除自己以外的其他标签

基本语法

$('#p1').siblings('p').css('color','red');

这里我们找到了除了id为p1标签以外的所有p标签

根据下标查找内容

有三种方法可以选择

/*根据下标匹配指定下标的*/
/*nth-child选择器和eq函数不相等*/
$('li').eq(2).css('color','blue');
$('li:nth-child(3)').css('color','red');
$('li:eq(2)').css('color','green');

第一种是eq()，可以找到指定下标下面的li标签

第二种是根据css选择器去选择孩子标签

第三种和第一种是差不多的，都是根据eq函数去寻找

查找奇数和偶数

jQuery中专门封装了能够查找奇数和偶数的函数

查找偶数

$('li:even').css('color','red');

这个是找到li标签中偶数下的的对象并设置为红色

查找奇数

$('li:odd').css('color','green');

这个是找到li标签中奇数下的对象并设置为绿色

1.5 jQuery操作属性

jQuery操作属性有两种方法

一种是prop函数

一种是attr函数

attr函数

attr()函数是指定一个参数表示获取该属性的值

attr()函数指定两个参数时表示设置属性值，可以设置自定义属性，这个方法在jQuery所有版本中都可以使用

基本语法

$('#p1').attr('title');//获取id为p1中title属性的值

$('#p1').attr('title','我是p1标签里面的title属性值');//设置id为p1中title属性的值

$('#p1').attr({
    title: '瞅你咋地',
    nichousha: '我抽你长得帅'
});//这个是可以设置多个属性值

但是在jQuery1.6版本之后属性值为布尔类型的属性，都不推荐使用attr来操作，因为使用attr来操作的得到的值不会是true或者false，而是原本的值，例如input复选框选中状态为checked，我们一般获取会是布尔类型的，为true或者false，但是使用attr函数获取的时候会是checked

prop函数

prop和attr一样，也是一个操作属性的函数

和attr不同的是，在jQuery1.6版本之后可以正常显示布尔类型的属性，有就为true，无就为false，其他的用法和attr是差不多的

基本语法

$('#p1').prop('title');//获取id为p1中title属性的值

$('#p1').attr('title','我是p1标签里面的title属性值');//设置id为p1中title属性的值

$('#p1').attr({
    title: '瞅你咋地',
    nichousha: '我抽你长得帅'
});//这个是可以设置多个属性值

attr和prop函数的区别有以下几点

prop只能操作原生属性，attr可以操作任意属性
在jQuery1.6开始属性值为布尔类型的属性，只能使用prop来设置
推荐jQuery1.6以后版本中原生属性都使用prop来操作，自定义属性使用attr来操作

addClass函数

addClass顾名思义就是追加class属性

这个是在不改变原有class属性的前提下添加class属性的

基本语法

$('p').addClass('red');//给p标签添加class为red的属性

removeClass函数

这个是移除class属性，删除某一个class属性

基本语法

$('p').removeClass('red');//移除p标签里面属性值为red的class属性

其中使用attr或者prop操作样式和addClass操作样式的区别有如下几点

attr或者prop是用来操作属性的，class也是属性之一，所以可以被他们操作
addClass是专门用来操作样式的，只能用于控制class的一个属性
attr和prop都是覆盖操作，addClass是追加操作
推荐使用addClass

hasClass函数

这个是判断jQuery对象中是否含有某个class属性的判断方法

如果含有的话就会返回true，否则就会返回false

基本语法

jQuery对象.hasClass('off');

这个是判断当前选中的jQuery对象是否含有off这个class属性

toggleClass函数

这个函数是可以切换class属性的函数，这个里面可以自动判断是否有这个class属性，可以任意切换class属性的一个函数

基本语法

/*如果body有off样式则删除否则加上*/
$('body').toggleClass('off');

判断jQuery对象是否有off样式，有的话就删除，没有的话就加上

html函数

html函数和text函数差不多，都是可以获取到jQuery对象里面的内容

但是他们之间还是有区别的

例如以下

<ol>
    <li>上课不许睡觉</li>
    <li>上课不许玩手机</li>
    <li>上课不许写代码</li>
</ol>

/*text会取到匹配到的所有内组成的字符串*/
console.log($('li').text());

text会取到所有满足条件的所有文本值，并组成一个字符串

在这里插入图片描述

以上是输出结果

html只会获取到满足条件的第一个结果

/*html匹配到第一个内容*/
console.log($('li').html());
console.log($('li:eq(1)').html());
console.log($('li').eq(1).html());

但是html函数可以根据下标去找到我们需要的值

在这里插入图片描述

以上是输出结果

同时需要注意的是，text函数有一个可以设置一个回调函数

/*text和html的参数如果为函数时,这个函数一定要有返回值,返回的值就是设置的值*/
/*
* 回调函数中两个参数
* 参数一: 被设置内容的下标
* 参数二: 被设置标签的原始内容
* */
$('li').text(function (index,el) {
    // console.log(index);
    // console.log(el);
    return '回调函数中设置的内容' + (index+1);
});

同时这个回调函数也适用于val函数，同样也可以批量设置值

/*批量设置*/
$('input[type="checkbox"]').val(["ok1","ok2"]);

/*textarea的内容设置也用val方法*/
$('#address').val('你猜猜我在哪');
$('#username').val(function (index,value) {
    return '函数内容';
});

但是val仅仅作用域表单元素

1.6 jQuery操作标签

操作标签是对html元素基本的增删改查

初始化创建一个p2的jQuery对象

/*创建jQuery对象*/
let p2 = $('<p title="我是新来的">你猜猜我是谁</p>');

1.6.1 添加标签

append函数

基本语法

$("#main").append(p2);

这个是在main的最后追加内容

appendTo函数

这个函数的意思正好和上面append函数反过来

p2.appendTo($('#main'));

这个和上面的效果是一样的，意思是将p2标签追加到main的最后

prepend函数

基本语法

$('#main').prepend(p2);

这个是在main的最前面追加p2标签

prependTo函数

这个函数也是正好和上面的函数相反

p2.prependTo($('#main'));

这个是将p2追加到main的最前面

after函数

基本语法

$('#main').after(p2);

这个是在main的后面添加p2，添加的是兄弟标签

before函数

基本语法

$('#main').before(p2);

这个是在main的前面添加p2，添加的同样是兄弟标签

1.6.2 删除标签

<body>
    <button type="button" id="empty">empty删除</button>
    <button type="button" id="remove">remove删除</button>
    <button type="button" id="detach">detach删除</button>
    <div id="d1">
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
    </div>
</body>

empty函数

这个函数是清除元素内部的所有元素

$('#empty').click(function () {
    /*清空d1元素内部所有元素*/
    let d1 = $('#d1');
    d1.empty();
    console.log(d1.empty());
});

remove函数

$("#remove").click(function () {
    /*remove函数删除元素本身*/
    /*
    * 返回值是被操作的标签的jQuery对象
    * 并且该对象携带的事件绑定一起被删除
    * */
    let d1_remove = $('#d1').remove();
    console.log(d1_remove);
    setInterval(function () {
        $('body').append(d1_remove);
    },2000);
});

detach函数

$('#detach').click(function () {
    /*detach函数删除元素本身
    * 返回值是被操作的标签的jQuery对象
    * 该对象携带的事件绑定会留下
    * */
    let d1_detach = $('#d1').detach();
    console.log(d1_detach);
    setInterval(function () {
        $('body').append(d1_detach);
    },2000);
});

三个删除的区别

empty是用来清空元素内部内容，remove和detach是用来删除元素本身
remove删除的元素是彻底删除，包括元素携带的事件一起消失，再次追加回该元素，事件无法带回
detach删除的元素是彻底删掉，但是元素携带的事件不会消失，再次追回该元素，事件会被一起带回来

1.6.3 克隆标签

克隆标签其实也是添加标签，需要配合添加标签一起使用

$('#clone').click(function () {
    $('p').clone().appendTo($('#d1'));
});
$('#clone').click(function () {
    /*clone函数传参数true表示深度克隆,会把标签的绑定事件一起复制,默认是false只克隆标签,不携带事件*/
    $('p').clone(true).appendTo($('#d1'));
});

二. 浏览器存储

浏览器有三种存储数据的方式

cookie存储
本地存储
session存储

下面就介绍这三种存储方式，并配合案例实现对存储操作的巩固

2.1 本地存储

本地存储在浏览器中能够找到

在这里插入图片描述

操作本地存储的方法

localStorage.setItem(‘key’,‘value’)函数

这个是存储内容到本地的函数，使用的是key: value的方式存储

/*存储内容到本地*/
localStorage.setItem('username','陈奕迅');

localStorage.getItem(‘key’)函数

这个是取值，通过key来获取value值，返回的是key的value值

/*从本地存储取值*/
console.log(localStorage.getItem('username'));

localStorage.removeItem(‘key’)函数

这个是删除本地存储的值

通过key来删除本地存储的值

/*删除本地存储的值*/
localStorage.removeItem('username');

localStorage.length 属性

这个是可以获取到本地存储的存储条数

/*获取本地存储的数量*/
console.log('当前存储条数:'+ localStorage.length);

localStorage.key(index) 函数

这个可以根据内容的下标获取到本地存储的key值

/*根据存储内容下标获取key*/
console.log('下标为1的key是:' + localStorage.key(1));

localStorage.clear() 函数

这个可以清空本地存储

/*删除本地存储的值(全部删除)*/
localStorage.clear();

2.2 cookie使用

document.cookie

这个是获取所有cookie的一个方法

可以打印出浏览器存在的cookie

/*获取cookie*/
let ck = document.cookie;
console.log(ck);

设置cookie

设置cookie也是key和value的形式

document.cookie = 'age=18';

这里就是设置cookie的方式

如果后面设置了相同key的cookie后面的会将前面的覆盖掉，多条cookie也会自动叠加

修改cookie

修改cookie也就是重新赋值即可

/*多条cookie回自动叠加*/
document.cookie = 'age=18';
/*相同的key则会覆盖内容*/
document.cookie = 'age=20';

删除cookie

现在没有直接删除cookie的方法，如果想要删除cookie的话只能设置cookie的有效期，将有效期设置为以前的时间即可

date.setDate(date.getDate() + 7);
document.cookie = 'sex=boy;expire='+date;
/*删除cookie的方案是把有效期设置为以前的时间即可*/
let date1 = new Date(-1);

document.cookie = 'age=123;expires=' + date1;

2.3 session存储

session存储的除了前面调用方法的标识为sessionStorage之外，其他的所有方法都和本地存储的方法一样

2.4 无刷新评论案例

使用浏览器存储完成无刷新评论案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无刷新评论案例</title>
    <script src="../js/jquery-3.1.0.js"></script>
    <style>
        .main {
            width: 1000px;
            margin: 0 auto;
        }
        .apply div {
            display: flex;
            align-items: center;
            margin: 10px;
        }
        .apply div label {
            width: 100px;
        }

        .apply-item {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="content">
            <h2>jquery是否好用?</h2>
            <p>
                同时，我们如果想要使用jQuery的话，我们还需要引入一个js文件，这个js文件是大佬们帮我们封装的很多对于DOM对象操作的代码，而且整个组件库的底层代码都是通过js实现的，所以js是我们学习前端最基础的知识，同时也是知识量最多的，学习其他框架或者组件库都需要了解基本的js知识
            </p>
        </div>
        <div id="msg">
            <div class="apply">
                <div>
                    <label for="nickName">评论人</label>
                    <input type="text" name="nickName" id="nickName">
                </div>
                <div>
                    <label for="app">评论内容</label>
                    <textarea name="app" id="app" cols="30" rows="10"></textarea>
                </div>
                <div>
                    <label></label>
                    <button type="button" id="btn">提交</button>
                </div>
            </div>
            <div class="apply-list">
                <div class="apply-item">
                    <span class="item-nickname">昵称: 张三</span>
                    <div class="item-content">楼主说得对!</div>
                    <div class="item-time">2021-4-1 11:29:02</div>
                </div>
                <div class="apply-item">
                    <span class="item-nickname">昵称: 张小花</span>
                    <div class="item-content">催更催更</div>
                    <div class="item-time">2021-4-1 11:29:02</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        getList();
        $('#btn').click(function () {
            //获取输入者名称
            let name = $('#nickName').val();
            //获取输入内容
            let app = $('#app').val();
            let date = new Date().toLocaleString();
            if (!name) {
                alert("昵称不能为空!");
                return;
            }
            if (!app) {
                alert("评论内容蹦年为空!");
                return;
            }
            let item = $(
                '<div class="apply-item">\n' +
                '     <span class="item-nickname">昵称: '+ name + '</span>\n' +
                '     <div class="item-content">'+ app +'</div>\n' +
                '     <div class="item-time">' + date + '</div>\n' +
                '</div>'
            );
            /*追加标签到指定位置*/
            $('.apply-list').prepend(item);
            /*清空我们的输入框*/
            $('input').val('');
            $('#app').val('');


            /*初始化评论列表的数组*/
            /*如果本地存储中存在则获取已有数组*/
            let appList = localStorage.getItem("appList") || "[]";
            /*json字符串转换为json对象*/
            appList = JSON.parse(appList);
            let appObj = {
                name: name,
                app: app,
                date: date
            };
            appList.push(appObj);
            appList = JSON.stringify(appList);

            console.log(appList);
            localStorage.setItem('appList',appList);
        });
    });

    function getList() {
        /*获取本地存储的内容,结果一定是字符串,取不到值结果为null*/
        let appList = localStorage.getItem("appList") || "[]";
        /*转换json字符串为json对象*/
        console.log(typeof appList);
        appList = JSON.parse(appList);
        console.log(appList);
        /*数组反转*/
        appList = appList.reverse();
        /*遍历数组*/
        let html = '';
        for (let i = 0;i < appList.length; i++) {
            let obj = appList[i];
            html += '<div class="apply-item">\n' +
                    '     <span class="item-nickname">昵称: '+ obj.name + '</span>\n' +
                    '     <div class="item-content">'+ obj.app +'</div>\n' +
                    '     <div class="item-time">' + obj.date + '</div>\n' +
                    '</div>'

        }
        $('.apply-list').prepend(html);
    }
</script>
</html>

三. 总结

以上就是jQuery入门篇的全部内容，这里面有介绍jQuery的基本使用和一些基本的语法知识，jQuery本身就是js的一个操作DOM对象的封装库，所以很多用法也和js原生差不多，只不过他们之间的方法是不能够共用的，所以需要处理一些细节问题。
本人是一名刚开始学习前端的小白，博文的内容都是按照自己对于jQuery这个库的理解所编写的，里面有些内容可能理解的不是很恰当，大家发现问题可以多多提出，一切学习，共同进步！！！

标签：jQuery,p1,函数,标签,前端,入门篇,cookie,属性
来源： https://blog.csdn.net/m0_46084075/article/details/115437963

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端学习——jQuery入门篇

一. jQuery入门

1.1 初步感受jQuery

1.2 初始化函数

1.3 DOM对象和jQuery对象转换

1.3.1 DOM对象转换为jQuery对象

1.3.2 jQuery对象转换为DOM对象

1.4 jQuery选择器

1.5 jQuery操作属性

1.6 jQuery操作标签

1.6.1 添加标签

1.6.2 删除标签

1.6.3 克隆标签

二. 浏览器存储

2.1 本地存储

2.2 cookie使用

2.3 session存储

2.4 无刷新评论案例

三. 总结