jQuery学习笔记

最新推荐文章于 2022-11-06 14:59:42 发布
最新推荐文章于 2022-11-06 14:59:42 发布
阅读量149 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45521812/article/details/109952859
版权

写这篇笔记的目的主要是方便以后的复习和回顾（因为我记性真的很差），这些都是我看视频一点一点敲的小知识点，在此进行汇总，不足之处，还望谅解，可以评论区讨论。

体验jq

<style>
        div{
            height: 100px;
        }
</style>
<script>
        // 入口函数
        $('document').ready(function(){
            // 设置边框
            $('#btn01').click(function(){
                $('div').css('border','1px solid #bfa');
            });
            // 设置文本
            $('#btn02').click(function(){
                $('div').text('我是设置的文字');
            });
        });
</script>
<body>
    <button id="btn01">边框</button>
    <button id="btn02">文字</button>
    <div></div>
    <div></div>
    <div></div>
</body>

体会和JavaScript不同的地方

jQuery的入口函数

<script>
//		
	//1.js的入口函数
        window.onload = function(){
            alert("window");
        }
    //2.jquery的入口函数
        $(function(){
            alert("jQ");
        });
//        $('document').ready(function(){
//        	alert("jQ");
//        });
//		以上两种方法都可
    </script>

  1. jQuery入口函数和window. onload入口函数的区别.

    • window. onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的.
    • 执行时机不同: jQuery入口函数要快于window . onload.
      jQuery入口函数要等待页面上dom树加载完后执行.
      window. onload要等待页面上所有的资源( dom树/外部css/js连接，图片)都加载完毕后执行.

  2. 如果报错：$ is not defined，就说明没有引入jQuery文件

  3. jQuery文件结构：是一个自执行函数
    (function(){…}());

  4. jQuery文件是一个自执行函数，执行这个jQUERY文件中的代码，其实就是执行这个自执行函数.
    $其实和jQuery是等价的，是一个函数，

text（）

  1. text（）：获取文本

    • 获取文本：text()方法不需参数
    • 获取标签为div的元素的文本
      包含了多个dom元素的jQuery对象,通过text()方法获取取文本,会把所有dom元素的文本获取到.
      alert($('div').text());

  2. text()方法给了参数， 参数就是要设置的文本

    • 给id为div1的这个标签设置文本
      $('#div1').text("新设置的文本");
      会覆盖他原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的.
      javascript $('#div1').text("新设置的文本<a>假链接</a>");

    • 修改标签为div的元素的文本
      包含了多个dom元素的jQuery对象,通过text( )方法设置文本,会把所有的dom元素都设置上.

设置获取样式CSS()

  1. 获取样式: css()方法设置参数就是要获取值的样式名.
    1. 获取id为div1元素的样式
    jalert($('#div1').css('width'));//同理获取到颜色和边框
    在这里插入代码片注意：在ie浏览器中，要获取边框这样的样式值,一定要记得给一个准确的边框.

    2.获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式.
    console.log($('div').css('width'));

  2. 设置样式：css(样式名,样式值);设置或修改样式，操作的是style属性

    1.设置单样式
    $('#div1').css('width','300px'); $('#div1').css('height',300);

    2.设置多样式

    			$('#div1').css({
                width:300,
                height:'300px',
                backgroundColor:'#bfa',
                border:'1px solid pink'
                // background-color:yellowgreen
            });

jQuery-CSS()方法

选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

鼠标移入事件

  • 以后如果有鼠标移入事件,请使用mouseenter，而不是mouseover
  • 鼠标离开事件使用mouseleave，不要使用mouseout
  • 具体事件：
  • 在这里插入图片描述jquery 事件文档

class操作


获取并设置CSS类

隐藏hide()和显示show()

  • show():显示被选的元素
    - show方法本质上是更新display属性为block

  • hide():隐藏被选的元素
    - hide方法本质上是更新display属性为none

  • toggle():对被选元素进行隐藏和显示的切换

  • 显示show(参数1,参数2);
    没有参数就没有动画效果(其他两种同理)

    参数1:代表执行动画的时长毫秒数， 也可以是代表时长的字符串
          fast(200毫秒) normal(400) slow(600)
          
参数2:代表动画执行完毕后的回调函数.
          注意：如果代表时长的单词写错了， 就相当于写了一个normal


jQuery效果 – 隐藏和显示

滑动

  • 滑下：slideDown(1,2)
  • 滑上：sildeUp(1,2)
  • 切换：slideToggle(1,2)
    - 参数1:动画执行的时长
    - 参数2:动画执行完毕后的回调函数

    jQuery – 滑动

淡入淡出

  • fadeIn() ：淡入已隐藏的元素。
  • fadeOut() ：用于淡出可见元素
  • fadeToggle() ：用于在 fadeIn() 与 fadeOut() 方法之间进行切换
  • fadeTo() ：允许渐变为给定的不透明度（值介于 0 与 1 之间）

    jQuery 效果 – 淡入淡出

自定义动画

  • animate ({params}, speed, easing, callback) 四个参数
  • 参数1:必选的对象代表的是需要做动画的属性
参数2:可选的代表执行动画的时长.
参数3:可选的，easing代表的是缓动还是匀速：linear(匀速)   swing(缓动)，默认不写是缓
参数4:动画执行完毕后的回调函数
  • 既然参数四是一个函数，那就可以写任意的代码，即可以在这里让指定对象做动画
    若要实现一直变化，就直接一直在函数中设置再设置

    jQuery 效果 – 动画

停止动画

  • stop:停止当前正在执行的动画
  • clearQueue:是否清除动画队列（ true false）
  • jumpToEnd:是否跳转到当前动画的最终效果 （true false）

    jQuery 停止动画

动态创建元素

<!-- 

    1.html();
    //设置或者获取内容的.
    $( ' #btnHtm11' ).click(function () {
    //1.1 获取内容: html()方法不给参数
    //获取到元素的所有内容
    // console.log($('#div1').html());
    //1.2设置内容: html()方法给参数
        会把原来的内容给覆盖
        如果设置的内容中包含了标签，是会把标签给解析出来的.
        $( ' #div1' ).html( '我是设置的内容<a href= "https://www. baidu.com">百度一下</a>');
    }); 

    2.$();|
        确实能创建元素,但是创建的元素只存在于内存中，如果要在页面上显示，就要追加. 
        $( ' #btn1' ) .click(function () {
            var $link = $('<a href="http://news . baidu. com/">我是新闻</a>' );
            console .1og($link);
            // 追加节点.
            $( ' #div1' ) .append($link);
        });

 -->

添加节点

<!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-1.12.4.js"></script>
    <script>
        $(function () {

            // 1.append()
            // 父元素.append(子元素);   作为最后一个子元素添加
            $('#btnAppend').click(function () {
                // // 1.1新创建一个li标签，添加ul1中
                // var $liNew = $("<li>我是新创建的li标签</li>");
                // $('#ul1').append($liNew);

                // 1.2 把ul1中已经存在的li标签添加到ul中去
                //     效果：剪切后作为最后一个子元素添加
                // var $li3 = $('#li3');
                // $('#ul1').append($li3);

                // 1.3 把ul2中已经存在的li标签添加到ul1中去
                //      效果：剪切后作为最后一个子元素添加
                var $li32 = $('#li32');
                $('#ul1').append($li32);
            });

            // 2.prepend()
            // 
            $('#btnPrepend').click(function () {
                // 2.1新建一个1i标签, 添加到u11中去
                // var $liNew = $("<li>我是新创建的1i标签</1i>");
                // $(' #ul1').prepend($liNew);

                // 2.2把u11中已经存在的1i标签添加到u11中去.
                //      效果：剪切后作为第一个子元素添加.
                // var $li3 = $('#li3');
                // $('#ul1').prepend($li3);

                // 2.3 把ul2中已经存在的li标签添加到ul1中去
                //      效果：剪切后作为第一个子元素添加.
                var $li32 = $('#li32');
                $('#ul1').prepend($li32);

            });

            // 3.after()
            // 元素A. before(元素B);
            //把元素B插入到元素A的后面，B作为兄弟元素添加
            $('#btnPrepend').click(function () {

            });

            // 4.before()
            // 元素A. before(元素B);
            //把元素B插入到元素A的前面，B作为兄弟元素添加
            $('#btnbefore').click(function () {
                //新建一个div
                var $divNew = $('<div>我是新建的div</div>');
                $(' #ul1').before($divNew);
            });

            //5. appendTo();
            //子元素. appendTo(父元素); //把子元素作为父元素的最后一个子元素添加.
            $('#btnappendTo').click(function () {
                //5.1新建一个1i标签，添加到u11中去.
                var $liNew = $("<li>我是新创建的1i标签</1i>");
                $liNew.appendTo($('#ul1'));
            });

        });
    </script>
</head>

<body>
    <input type="button" value="append" id="btnAppend">
    <input type="button" value="prepend" id="btnPrepend">
    <input type="button" value="after" id="btnafter">
    <input type="button" value="before" id="btnbefore">
    <input type="button" value="appendTo" id="btnappendTo">
    <ul id="ul1">
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li id="li3">我是ul1中第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
    </ul>

    <ul id="ul2">
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li id="li32">我是ul2中第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
    </ul>
</body>

</html>


jQuery 添加元素

删除

  • jQuery remove() 方法删除被选元素及其子元素.
  • jQuery empty() 方法删除被选元素的子元素.

    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>
    <script src="/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // jQuery中操作属性 attr() removeAttr();

            // 1.设置属性
            $('#btn2').click(function(){
                // 设置单属性
                // $('img').attr('width',"100");   
                // $('img').attr('aaa','嘿嘿嘿');  //修改自定义属性
                // $('img').attr('bbb','新加的');  //如果元素原来没有这个属性，就是添加属性
                // 如果元素原来有这个属性，就是修改属性

                // 设置多属性
                $('img').attr({
                    width:'100',
                    aaa:'hhh',
                    bbb:'新加的'
                });
            });

            // 2.获取属性
            $('#btn1').click(function(){
                alert($('img').attr('aaa'));//若没有要获得的属性，获取到的值就是undefined；且attr()设置的属性也可以获取
            });

            // 3.移除
            $('#btn3').click(function(){
                // $('img').removeAttr('alt');
                // $('img').removeAttr('aaa');
                // $('img').removeAttr('bbb');

                // 多项移除
                $('img').removeAttr('alt aaa bbb'); //移除多属性
            });
        });
    </script>
</head>

<body>
    <input type="button" value="获取属性" id="btn1" />
    <input type="button" value="设置属性" id="btn2" />
    <input type="button" value="移除属性" id="btn3" />
    <br><br>
    <img src="./images/1.jpg" alt="周五晚睡1" title= "周五晚睡" aaa='aaa' />
</body>
</html>

属性操作

事件的注册和解绑

  • on()

  • 在这里插入图片描述
    在这里插入图片描述

  • off()
    括号里不写，就是解绑所有事件；写了就是解绑指定事件

事件的触发

  • trigger()

链式编程与end()

在这里插入图片描述

资源

jQuery 教程

视频资源

CXXD
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery学习笔记Jquery学习笔记
10-29
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery - 学习笔记 -
weixin_41170223的博客
01-15 333
获取元素 模拟css选择元素 div id="div1" class="box">Divdiv> $('#div1') // 获取 id $('div') // 获取 标签 $('.box') // 获取 class 独有表达式选择 body> ul> l
jQuery 学习笔记
10-16 554
jQuery 学习笔记 记录学习jQuery过程中的点滴 $.on('load',function(){}) //添加监听事件 $('#load_more').off('click') //移去监听事件，如：加载按钮没有更多数据的时候 $.ajax({ type:"GET", //获取数据的方式 url: "film.php/?page="+page, //地址 data
【锋利的JQuery】 学习笔记
D!eR 个人博客
11-23 2362
据说是一本不错的JQuery书，看完后感觉总体也不错，介绍的挺全面的，列举了大量的例子，比较易懂。加上之前学过一点CSS方面的知识，所以在看选择器这部分也比较容易理解（很多都是CSS的写法）。总体感觉，JQuery大置分成了几大块：选择器、DOM操作、事件、动画、AJAX。本书都一一的介绍了，特别是选择器，几乎每种选择器都列举了一个例子，很容易看懂。此文为读本书的过程中，记录的一些笔记，例子不是书
jQuery的学习笔记
qi_bai_jin的博客
11-06 1018
jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
jquery学习笔记
04-04
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript...
jQuery学习笔记01
01-08
1、jQuery介绍 1.1什么是jQuery ?  jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。 1.2 jQuery核心思想  它的核心思想是write less,do more(写得更少,做得更多)，所以它...
JQuery 学习笔记 element属性控制
10-29
JQuery元素属性控制
JQuery学习笔记
09-02
这是本人学习JQuery的时候所做的笔记，希望对大家有帮助
锋利的JQuery学习笔记.pdf
08-14
锋利的JQuery学习笔记
Jquery 学习笔记（一）
10-29
从今天起正式学习Jquery（实际严格讲已经用了几个月的Jquery的一丁点东西），边学边做边记笔记；阅读书籍《锋利的Jquery》+Jquery API Doc。
Jquery 学习笔记（二）
10-29
从最开始看到Jquery这样的选择器就让我想起了CSS的选择器，简直是同出一辙啊，CSS的选择器语法个人觉得相当的经典，那么Jquery借鉴CSS也就没有多少疑问了。
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值