您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

前端学习——jQuery入门篇

一. 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函数的区别有以下几点

  1. prop只能操作原生属性,attr可以操作任意属性
  2. 在jQuery1.6开始属性值为布尔类型的属性,只能使用prop来设置
  3. 推荐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操作样式的区别有如下几点

  1. attr或者prop是用来操作属性的,class也是属性之一,所以可以被他们操作
  2. addClass是专门用来操作样式的,只能用于控制class的一个属性
  3. attr和prop都是覆盖操作,addClass是追加操作
  4. 推荐使用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);
});

三个删除的区别

  1. empty是用来清空元素内部内容,remove和detach是用来删除元素本身
  2. remove删除的元素是彻底删除,包括元素携带的事件一起消失,再次追加回该元素,事件无法带回
  3. 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这个库的理解所编写的,里面有些内容可能理解的不是很恰当,大家发现问题可以多多提出,一切学习,共同进步!!!


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进