jQuery自学笔记（1-10)

最新推荐文章于 2024-11-14 10:56:19 发布

陈同学在努力_

最新推荐文章于 2024-11-14 10:56:19 发布

阅读量369

点赞数

分类专栏： jQuery自学笔记文章标签： jquery javascript js css html5

本文链接：https://blog.csdn.net/weixin_43614380/article/details/109767834

版权

jQuery自学笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

六天学习jQuery的一些笔记
前排感谢黑马程序员
附课程视频链接：web前端基础教程4天从零玩转jQuery
案例所用到的资源链接：提取码: 7p88

01-一个小案例讲述原生js的缺点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        div{
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value = "设置边框" id = "btnOne"/>
    <input type="button" value = "设置文本" id = "btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
</body>

<script>
    window.onload = function(){
        // 1.先要获取对应的元素
        var btnOne = document.getElementById("btnOne");
        var btnTwo = document.getElementById("btnTwo");
        var divs = document.getElementsByTagName("div");

        // 2.给btnOne按钮设置点击事件
        btnOne.onclick = function(){
            for(var i = 0;i <divs.length;i++){
                divs[i].style.border = '1px solid red';
            }
        }

        // 3.给btnTwo按钮设置点击事件
        btnTwo.onclick = function(){
            for(var i = 0;i <divs.length;i++){
                divs[i].textContent = "我是设置的文本";
            }
        }
    }

    /*分析一下元素js的缺点：
        1.不能添加多个入口函数(window.onload)，如果添加了多个，后面的会把前面的给覆盖掉
        2.原生js的api名字都太长太难记
        3.原生js有的时候代码会有冗余
        4.原生js中有的属性或者方法，有浏览器兼容问题。
        5.原生js容错率比较低，前面的代码出了问题，后面的代码执行不了。
    */
</script>

</html>

02-体验jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        div{
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <input type="button" value = "设置边框" id = "btnOne"/>
    <input type="button" value = "设置文本" id = "btnTwo"/>
    <div></div>
    <div></div>
    <div></div>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    //入口函数
    $(document).ready(function(){
        //设置边框
        $('#btnOne').click(function(){
            $('div').css('border','1px solid red');
        });
        
        //设置文本
        $('#btnTwo').click(function(){
            $('div').text('我是设置的文本');
        });
    });

    //这又是一个入口函数
    $(document).ready( function () {
       console.log("hello") ;
    });

    /*
        jQuery的优势:
        1.是可以写多个入口函数的
        2.jQuery的api名字都容易记忆
        3.jQuery的代码简介（隐式迭代）
        4.jQuery帮我们解决了浏览器兼容问题
        5.容错率较高，前面的代码出了问题，后面的代码不受影响
    */

</script>


</html>

03-jQuery是什么

jQuery就是一个库，封装了很多js的函数

04-如何使用jQuery

<!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>
<body>
    <div></div>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    /*
        如何使用jquery
        1.引入jQuery文件
        2.写一个入口函数
        3.找到要操作的元素（jQuery选择器，去操作他给她添加属性，样式，文本
        
    */
    $(document).ready(function name(params) {
        $('div').width(100).height(100).css('backgroundColor','red').text('哈哈'); //链式编程
    });
</script>
</html>

05-jQuery的个版本以及区别

1.jQuery的版本

1.x 支持IE678老浏览器不更新了
2.x 不兼容IE678 不更新了
3.x 不兼容IE678 还在更新中

2.每一个版本jQuery又有压缩版和未压缩版

compressed 压缩版也叫精简版，去掉了格式，体积小，用于发布
uncompressed 未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发

06-jQuery的入口函数

<!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>
<body>
    
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
//1.JQuery写法两种
    $(document).ready(function name(params) {
        
    });

    $(function(){ //常用这种

    });

//2.jQuery入口函数和window.onload入口函数的区别
//i.前者入口函数可以有多个，后者只能写一个
//ii.执行时间不同:
//jQuery入口函数要等待页面上dom树加载完后执行
// windows.onload要等待页面上所有的资源(dom树/外部css/js链接，图片)都加载完毕后执行
    window.onload = function name(params) {
        alert('windows');
    }

    $(function name(params) {
        alert('function');
    });

</script>

</html>

07-$是一个函数

1.$是什么？

如果报了这个错误：$ is not defined，就说明没有引入jquery文件

2.jQuery文件结构

其实是一个自执行函数

(function(){
    window.jQuery = window.$ = jQuery;
}())

3.引入一个js文件，是会执行这js文件中的代码的

4.$其实和jQuery是等价的，是一个函数

   console.log(window.jQuery == window.$); //true
   console.log(Object.prototype.toString.call($)); //true

5 传递参数不同，效果也不同

传递的是一个匿名函数–>入口函数

   $(function(){

   });

传递的是一个字符串–>选择器/创建一个标签

   $('#one');
   #('<div>啦啦，我是一个div</div>);

如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象

    $(dom对象)

08-dom对象和jQuery对象介绍

1.dom对象

原生js选择器获取到的对象

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

2.jQuery对象

利用jQuery选择器获取到的对象

特点：只能调用jQuery的方法或属性，不能调用原生jsdom对象的属性或方法

3.jQuery对象长什么样

jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集

09-dom对象和jQuery对象之间的相互转换

1.dom对象转换成jQuery对象

    var div1 = document.getElementById("one");
    var $div1 = $(div1);
    console.log($div1);

2.jQuery对象转换成dom对象

1.使用下标来取出来

    var $divs = $('div');
    var div1 = =$divs[0];
    console.log(div1);

2.使用jQuery对象 get()

    var div1 = $divs.get(1);
    console.log(div1);

10-开关灯的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关灯</title>
</head>
<body>
    <button>开灯</button>
    <button>关灯</button>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(function name(params) {
        var btns =  document.getElementsByTagName("button");
        btns[1].onclick = function name(params) {
            $('body').css('background','black');
        }
        $(btns[0]).click(function name(params) {
            $('body')[0].style.backgroundColor = 'white';
        })
    })
</script>
</html>