jQuery学习笔记

最新推荐文章于 2024-03-29 10:31:44 发布

栀虞子

最新推荐文章于 2024-03-29 10:31:44 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/qq_52476758/article/details/123387610

版权

学习笔记专栏收录该内容

20 篇文章 7 订阅

订阅专栏

1. 初始JQuery

1.1 原生js的缺点

不能添加多个入口函数(window.onload)，如果添加了多个，后面的会把前面的覆盖
原生js的api名字都太长
原生js有的时候代码冗余
原生js中有些属性或者方法有浏览器兼容问题
原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

1.2 体验jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>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>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.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('我又是一个入口函数')
  })
</script>

jQuery的优势：

是可以写多个入口函数的
jQuery的api的名字都容易记忆
jQuery代码简洁(隐式迭代)
没有浏览器兼容问题
容错率比较高，前面的代码出了问题，后面的代码不受影响

如何使用jQuery：

引入jQuery文件
写一个入口函数
找到你要操作的元素(jQuery选择器)，去操作他(给他添加属性，样式，文本…)

官网下载jQuery：https://releases.jquery.com/jquery/#jquery-all-1.x

2. JQuery的基础

2.1 jQuery的入口函数

写法：

$(document).ready(function (){})
$(function (){});

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

window.onload入口函数不能写多个，而jQuery入口函数能写多个
执行时机不同，window.onload后执行，jQuery先执行，无关位置
jQuery入口函数要等待页面上dom树加载后执行
window.onload入口函数要等待页面上所有的资源(dom树/外部css/js链接/图片)加载完毕后执行

2.2 $是一个函数

$是什么？

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

$与window是等价的，都是一个函数
jQuery文件的结构：(function(){window.jQuery = window.$ = jQuery;}()); 是一个自执行函数(给window添加一个jQuery属性和$属性)
$是一个函数，如果参数传递不同，效果也不同：如果参数传递的是一个匿名函数-》入口函数；如果参数传递的是一个字符串-》选择器/创建一个标签；如果参数是一个DOM对象，那他就会把DOM对象转换为jQuery对象。

2.3 DOM对象和jQuery对象

dom对象：原生js选择器获取到的对象，如var div=document.getElementById("one");

特点：只能调用dom方法或者属性，不能调用jQuery的属性和方法
jQuery对象：利用jQuery选择器获取到的对象，如var $div1=$('#one');

特点：只能调用jQuery的方法和属性，不能调用原生jsDOM对象的属性和方法
jQuery对象是一个伪数组jQuery对象其实就是dom对象的一个包装集

dom转jQuery：

var div1=document.getElementById('one');
var $div1=$(div1);

jQuery转dom

// 1. 使用下标取出来
var $divs=$('div');
var div1=$divs[0];
console.log(div1);

// 2. 使用jQuery的方法
var div2=$divs.get(1);
console.log(div2);

3. jQuery元素设置

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

text()：获取和设置文本

<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">

<div id="div1">我是一个div标签
  <p>我是一个p标签<span>span1</span></p>
</div>
<div>我是一个div2标签
  <p>我是一个p2标签<span>span2</span></p>
</div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  // 1. 获取文本,text()不给参数
  $('#getBtn').click(function (){
    // 1.1 获取id为div1这个标签的文本
    // 会获取到这个标签中所有的文本，包括后代元素的文本
    console.log($('#div1').text());

    // 1.2 获取标签为div的元素的文本
    // 包含了多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到
    console.log($('div').text());
  })

  // 2. 设置文本：text()方法有参数，参数为设置得文本
  $('#setBtn').click(function (){
    // 2.1 给id为div1的这个标签设置文本
    // 会覆盖原来的内容，如果设置得文本中包含标签，是不会解析标签的
    // $('#div1').text('我是新设置得文本')
    // 2.2 给标签为div的元素设置文本
    // 包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom元素都设置上
    $('div').text('设置得文本'); // 隐式迭代
  })
</script>

3.2 设置获取样式css()

<style>
    #div1{
        height: 200px;
        background-color: pink;
        border: 2px solid red;
    }
</style>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1" style="width: 200px"></div>
<div id="div2" style="width: 300px"></div>
<div id="div3" style="width: 400px"></div>
</body>
</html>
<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
  // 1. 获取样式：css()方法设置参数为要获取值的样式名
  $('#getBtn').click(function (){
    // 1.1 获取id为div1这个元素的样式
    console.log($('#div1').css('width')); // 200px
    // 在ie浏览器中要获取边框这样的样式，一定要记得给一个准确的值
    console.log($(`#div1`).css('border-top-width'));
    // 1.2 获取标签为div的元素们的样式，
    // 获取了包含多个dom对象的jquery对象的样式，只能获取到第一个dom对象的样式
    console.log($('div').css('width'));
  })
  // 2. 设置样式
  $('#setBtn').click(function (){
    // 2.1 给id为div1这个元素设置样式
    // 设置单样式
    // $('#div1').css('width','300px');
    // $(`#div1`).css('height','300px');

    // 设置多样式
    /*$('#div1').css({
      width:300,
      'height':'300',
      'backgroundColor':'green',
      border:'10px solid pink'
    })*/

    // 2.2 给标签为div的元素设置样式
    $('div').css('height','300px');
    $(`div`).css('backgroundColor','green');
  })
</script>

3.3 设置类名class()

/*1.添加一个类, addClass(类名)*/
$('#addClass').click(function (){
    // $(`#div1`).addClass('fontSize30'); // 添加单个类
    $(`#div1`).addClass('fontSize30 width200'); // 添加多个类
})
/*2.删除一个类 removeClass(类名)*/
$('#removeClass').click(function (){
    // $('#div1').removeClass('fontSize30'); // 移除单个类
    // $(`#div1`).removeClass('fontSize30 width200'); // 移除多个类
    $('#div1').removeClass(); // 移除所有类
})
/*3.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
$('#hasClass').click(function (){
    console.log($('#div1').hasClass('fontSize30'));
})
/*4.切换一个类  有就删除,没有就添加 toggleClass(类名)*/
$('#toggleClass').click(function (){
    $(`#div1`).toggleClass('fontSize30');
})

3.4 设置属性attr()

// input #btn1 #btn2 #btn3 img为同级元素
$(function () {
    //jQuery中操作属性:attr() removeAttr();
    //1.设置属性
    $('#btn2').click(function () {
        //设置单属性.
        $('img').attr('src','../image/992.gif');//以前有src属性,更改这个属性.
        // $('img').attr('aaa','哈哈哈');//修改自定义属性.
        // $('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.
        //设置多属性.
        $('img').attr({
            src:'../image/992.gif',
            aaa:"hahaha",
            bbb:'bbb'
        });
    });

    //2.获取属性.
    $('#btn1').click(function () {
        //console.log($('img').attr('src'));//自带的属性可以获取
        //console.log($('img').attr('aaa'));//自定义的属性也可以获取
        console.log($('img').attr('bbb'));//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.
    });

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

        $('img').removeAttr('alt aaa bbb'); //移除多属性.
    });
});

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

/*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/
$("#checkbox").prop("checked");	// 获取
$("#checkbox").prop("checked", true);	// 设置
$("#checkbox").prop("checked", false);
$("#checkbox").removeProp("checked");	// 删除

// input #btn1 #ckb1是同级元素
$(function (){
    // checked：写在元素的身上就表示选中，没有写在元素的身上就表示没有选中
    // 原生js怎么操作? 给他设置true或false，取值也是得到true或false
    /*document.getElementById('btn1').οnclick=function (){
      // 设置操作，
      // document.getElementById('ckb1').checked=false;
      // 获取操作
      console.log(document.getElementById('ckb1').checked);
    }*/
    // jQuery
    /*$('#btn1').click(function () {
      console.log($('#ckb1').attr('checked')); //无论是选中还是没有选中，都返回一个undefined。
    });*/
    //原因是：在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
    $('#btn1').click(function () {
        console.log($('#ckb1').prop('checked'));
        //如果多选框是选中状态返回一个true； 如果多选框是取消选中状态那返回就是一个false.
    });
})

4. 选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。

注意：jQuery选择器返回的是jQuery对象

4.1 基本选择器

在这里插入图片描述

跟css的选择器用法一模一样

4.2 层级选择器

在这里插入图片描述

跟css的选择器用法一模一样

4.3 过滤选择器-隔行变色

在这里插入图片描述

这类选择器都带冒号:

4.4 筛选选择器(方法)

在这里插入图片描述

5. 动画

5.1 基本动画

5.1.1 显示show()与隐藏hide()

// input #show #hide #toggle为同级元素
// 1. 显示 show()
// 参数1：代表执行动画的时长，毫秒数，也可以是代表时长的字符串(fast:200毫秒 normal:400毫秒 slow:600毫秒)
// 参数2：代表动画执行完毕后的回调函数
$('#show').click(function (){
    // 给id为div1的元素动画显示
    // 1.1 如果show()这个方法没有参数，则就没有动画效果
    // $('#div1').show();
    // 1.2 如果想要动画效果，
    // 如果代表时长的单词写错了，就相当于写了一个normal
    // $('#div1').show(2000);
    // 1.3 回调函数
    $('#div1').show(2000,function (){
        console.log('动画执行完毕了。。。。');
    })
})
// 2. 隐藏：hide()
$('#hide').click(function (){
    // 让id为div1的元素动画隐藏
    // $('#div1').hide();  // 没有参数没有动画效果
    // $('#div1').hide(2000);
    $('#div1').hide(2000,function (){
        console.log('动画隐藏了....');
    })
})
// 3. 切换：toggle()
// 如果元素是显示则动画隐藏，如果元素是动画隐藏则显示
$('#toggle').click(function (){
    $('#div1').toggle(2000);
})

5.1.2 滑入slideDown()与滑出slideUp()

// input #slideDown #slideUp #slideToggle #div1为同级元素
// 1. 滑入
// 参数1：动画执行的时长
// 参数2：动画执行的回调参数
$('#slideDown').click(function (){
    // 1.1 给id为div1的元素滑入
    // $('#div1').slideDown(); // 不加参数有动画效果，没有参数相当于给了一个默认参数 normal:400毫秒
    // $('#div1').slideDown(2000);
    $('#div1').slideDown(2000,function (){
        console.log('滑入了.....');
    })
})
// 2. 滑出
$('#slideUp').click(function (){
    // 让id为div1的元素滑出
    // $('#div1').slideUp();
    // $('#div1').slideUp(2000);
    $('#div1').slideUp(2000,function (){
        console.log('滑出了.....');
    })
})
// 3. 切换
$('#slideToggle').click(function (){
    $('#div1').slideToggle(2000,function (){
        console.log('切换.....');
    })
})

5.1.3 淡入fadeIn()与淡出fadeOut()

// input #fadeIn #fadeOut #fadeToggle #fadeTo #div1为同级元素
// 1. 淡入
$('#fadeIn').click(function (){
    // 1.1 让id为div1的元素淡入
    // $('#div1').fadeIn();  // 不给参数相当于给了默认的normal:400毫秒时长
    // $('#div1').fadeIn(2000);
    $('#div1').fadeIn(2000,function (){
        console.log('淡入.....');
    })
})
// 2. 淡出
$('#fadeOut').click(function (){
    // 1.1 让id为div1的元素淡出
    // $('#div1').fadeOut();  // 不给参数相当于给了默认的normal:400毫秒时长
    // $('#div1').fadeOut(2000);
    $('#div1').fadeOut(2000,function (){
        console.log('淡入.....');
    })
})
// 3. 切换
$('#fadeToggle').click(function (){
    $('#div1').fadeToggle(2000,function (){
        console.log('切换.....');
    })
})
// 4. 淡入到哪里
$('#fadeTo').click(function (){
    $('#div1').fadeTo(1000,0.5);  // fadeTo(speed,to,easing,callback)
})

5.2 自定义动画

// input #lr800 #div1 #div2为同级元素
$(function (){
    /*  自定义动画
    * 参数1：必选的，需要做动画的属性
    * 参数2：可选的，需要执行动画的总时长
    * 参数3：可选的，代表的是缓动还是匀速，linear：匀速 swing：缓动  默认是swing
    * 参数4：可选的，执行动画完成之后的回调函数  */
    $('#lr800').click(function (){
        // 让id为div1的元素动画移动到800那个位置
        // $('#div1').animate({left:800});
        // $('#div1').animate({left:800},5000);
        // $('#div1').animate({left:800},5000,'linear');
        // $('#div2').animate({left:800},5000,'swing');
        $('#div1').animate({left:800},5000,'swing',function () {
            console.log('动画执行完成');
        });
    })
})

5.3 动画队列-以及stop参数的含义

// input #start #stop #div1为同级元素
// 1. 开始动画：模拟一个动画队列
$('#start').click(function (){
    $('#div1').slideDown(2000).slideUp(2000);
})
// 2. 停止动画：执行stop方法
// 参数1：是否清除队列
// 参数2：是否跳转到最终结果
$('#stop').click(function (){
    /*2.1 停止当前动画  如果动画队列当中还有动画立即执行*/
    // $('#div1').stop();
    /*2.2 和stop()效果一致  说明这是默认设置*/
    // $('#div1').stop(false,false);
    /*2.3 停止当前动画  清除动画队列*/
    // $('#div1').stop(true,false);
    /*2.4 停止当前动画并且到结束位置  清除了动画队列*/
    // $('#div1').stop(true,true);
    /*2.5 停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行*/
    $('#div1').stop(false,true);
})

6. 插件

6.1 jQuery插件介绍-颜色插件

// button #btn,div为同级元素
$(function () {
    //需求: 点击按钮,让div做动画, left改变到800 , 改变背景色
    //animate动画不会改变背景色, 如果非要改,就要使用插件.
    $('#btn').on('click', function () {
        //让div做动画
        $('div').animate({
            left:800,
            width:100,
            height:100,
            backgroundColor:'green'
        },2000);
    });
    //什么是插件: 其实就是用来做扩展功能的.
    //jQuery插件库: jq22.com
});

6.2 插件使用-省市联动

<body>
  <div id="one">
    <select name="" ></select>
    <select name="" ></select>
    <select name="" ></select>
  </div>
<script src="../jquery-3.4.1/jquery-1.12.4.js"></script>
<script src="../plugin/distpicker.data.js"></script>
<script src="../plugin/distpicker.js"></script>
<script>
  $(function () {
    //使用插件
    //1.引入jQuery文件.
    //2.引入插件文件.
    //3.调用插件方法.
    $('#one').distpicker({
      province: "广东省",
      city: "深圳市",
      district: "宝安区"
    });
  });
</script>
</body>

6.3 插件的使用-UI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

// 基本使用
1.	引入jQueryUI的样式文件
2.	引入jQuery
3.	引入jQueryUI的js文件
4.	使用jQueryUI功能
$(function () {
    //ui  user interface  用户界面
    //jQueryUI插件是jQuery团队自己开发的一套用户界面插件.
    $( "#accordion" ).accordion();
    $( "#tabs" ).tabs();
});

6.4 自己开发jQuery插件

$(function () {
    //1.我们自己能不能封装插件呢?
    // //$('div').width(100).height(100).css('backgroundColor','red'); //设置背景色有些麻烦.
    // $('div').width(100).height(100).bgColor('red'); //现在jQuery中没有这个bgColor方法,所以报错了.
    //我们可以自己封装一个bgColor方法.

    //2.如何自己封装插件.

    //2.1 给jQuery的原型添加方法.
    //$('div').width(100).height(100).bgColor('red');
    $('div').bgColor('green').width(100).height(100);

    //2.2 给jQuery直接添加方法.
    console.log($.add(10, 20));
});

// 需求2.1 实现： jQuery-bgColor.js
(function ($) {
    //需要给jQuery的原型添加方法.
    $.fn.bgColor = function (yanse) {
        //console.log(this); //this是调用这个bgColor方法的jQuery对象.
        this.css('backgroundColor',yanse);
        //返回调用这个方法的jQuery本身
        return this;
    }
}(jQuery));

// 需求2.2 实现：jQuery-add.js
(function ($) {
  //直接给$添加方法.
  $.add = function (num1,num2) {
    return num1+num2;
  }
}(jQuery));

6.5 表格插件

$('#c').table(['序号', '姓名', '年龄', '工资'],[
    {n: 'xy', age: 20, s: 10},
    {n: 'wy', age: 10, s: 8},
    {n: 'pl', age: 11, s: 9}
]);

// 表格插件实现：jQuery-table.js
(function ($) {
  /**
   * 给$的原型添加table方法.
   * @param arrTableHead 生成表格表头的数组
   * @param arrTableBody 生成表格主体部分的数组
   */
  $.fn.table = function (arrTableHead,arrTableBody) {
    //console.log(this);//这里的this是一个jQuery对象,是调用这个table方法的jQuery对象.
    var list = [];
    list.push('<table>');
    //生成表头
    list.push("<thead>");
    list.push('<tr>');
    for(var i = 0 ; i < arrTableHead.length; i++){
    	list.push('<th>');
        list.push(arrTableHead[i]);
    	list.push('</th>');
    }
    list.push('</tr>');
    list.push("</thead>");
    //生成表格主体部分
    for(var i = 0 ; i < arrTableBody.length; i++){
    	list.push('<tr>')
        //生成一个序号td.
        list.push('<td>'+(i+1)+'</td>');
        //遍历arrTableBody这个数组的一个个的元素.
        for(var key in arrTableBody[i]){
          list.push('<td>');
          list.push(arrTableBody[i][key]);
          list.push('</td>');
        }
    	list.push('</tr>')
    }
    list.push('</table>');
    this.html(list.join(""));
  }
}(window.jQuery));

6.6 tab栏切换插件

// 与案例tab栏求换html,css相同
$(function () {
    $('#wrapper').tabs({
        tabHeads:'#tab-menu>li',
        tabHeadsClass:'active',
        tabBodys:'#tab-main>div',
        tabBodysClass:'selected'
    });
});

// 插件实现：jQuery-tabs.js
(function ($) {
  /**
   * 给$的原型添加tabs方法
   * @param option.tabHeads          需要注册事件的页签们选择器
   * @param option.tabHeadsClass     触发事件的页面要添加的类
   * @param option.tabBodys          要显示的页面们选择器
   * @param option.tabBodysClass     索引一致要显示的页面要添加的类.
   */
  $.fn.tabs = function (option) {
    var $bigDiv = this; //把this先存进$bigDiv变量中.
    //通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
    $bigDiv.find(option.tabHeads).on('click', function () {
      //给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
      $(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
      //获取当前点击的页面的索引
      var idx = $(this).index();
      //获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
      $bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
    });
    //返回值.
    return $bigDiv;
  }
}(window.jQuery));

7. 结点操作

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

// input #btnHtml1 #btn1 #div1为同级元素
// 1. 原生js中创建节点：document.write();||innerHTML();||document.createElement();
// 2. jquery中创建节点:
// 2.1 html()
$('#btnHtml1').click(function (){
    // a. 获取内容：html()方法不给参数
    console.log($('#div1').html());
    // b. 设置内容：html()方法给参数
    // // 会把原来的内容给覆盖，如果设置得内容包含标签,会把标签解析出来
    $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>');
})
// 2.2 $();
// 确实能创建元素，但是创建的元素只存在于内存中，如果要在页面上显示，就要追加
$('#btn1').click(function (){
    var $link=$('<a href="https://www.baidu.com">我是新闻</a>')
    // console.log($link);
    // 追加节点
    $('#div1').append($link); // 不会覆盖原来的内容
})

7.2 jquery添加节点

// input #btn... #ul1 #ul2 为同级元素,#li3 #li32为同级元素
$(function (){
    // 1. 父元素.append(子元素)：将子元素添加到最后一个
    $('#btnAppend').click(function (){
        // 1.1 创建一个li标签，添加到ul1中去
        /*var $liNew=$('<li>我是新创建的li标签</li>')
      $('#ul1').append($liNew);*/

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

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

    // 2. 父元素.prepend(子元素)：将子元素添加到第一个
    $('#btnPrepend').click(function (){
        // 2.1 创建一个li标签，添加到ul1中去
        /*var $liNew=$('<li>我是新创建的li标签</li>')
      $('#ul1').prepend($liNew);*/

        // 2.2 把ul1中已经存在的li标签添加到ul中，剪切后作为最后一个子元素添加
        /*var $ul3=$('#li3');
      $('#ul1').prepend($ul3);*/

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

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

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

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

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

// input #btn #ul1为同级元素 
$(function (){
    $('#btn').click(function (){
        // 1. 清空ul
        // $('#ul1').html(""); // 不推荐使用，有可能造成内存泄漏，不安全
        // $('#ul1').empty();  // 推荐使用

        // 2. 移除某一个元素
        // $('#li3').remove(); // 自杀

        // 3. 移除ul，但是只能获取Li3这个标签、
        $('#li3').parent().remove();
    })
})

7.4 克隆节点clone()

// #clone #div1为同级元素
$(function (){
    // 给id为div1的元素添加点击事件
    $('#div1').click(function (){
        alert('div1点击了....');
    })

    // clone():只存在内存中，如果在页面上显示，就应该追加到页面上
    // clone()方法其实有参数，不管是true(表示把事件一起克隆)还是false(不可隆事件)，都是会克隆到后代节点的
    $('#clone').click(function (){
        var $cloneDiv=$('#div1').clone(true); // 默认是false
        // 修改克隆节点的id
        $cloneDiv.attr('id','div2');
        // console.log($cloneDiv);
        // 把克隆的节点追加到body中
        $('body').append($cloneDiv);
    })
})

8. 特殊属性操作

8.1 val()获取或设置表单元素内容

// input #btn #txt 为同级元素
$(function (){
    // 原生js通过value属性来获取或者设置表单元素的值
    // jquery: val()
    $('#btn').click(function (){
        // val()方法不给参数就是获取
        // console.log($('#txt').val());
        // val()方法给参数就是设置
        $('#txt').val('我是设置得值');
    })
})

8.2 width方法和height方法

// input #btn,div #one是同级元素
$(function (){
    $('#btn').click(function (){
        // 1. 获取id为one的元素的宽和高
        /*console.log($('#one').css('width'));
      console.log($('#one').css('height'));*/

        // 2.width() height() 获取/设置高度、宽度，不包括内边距和外边距 有参数设置 无参数获取
        /*console.log($('#one').width());
      console.log($('#one').height());*/
        /*$('#one').height(300);
      $('#one').width(300);*/

        //4 outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。
        console.log($('#one').outerWidth());
        console.log($('#one').outerHeight());

        //5 outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
        console.log($('#one').outerWidth(true));
        console.log($('#one').outerHeight(true));

        //1.5 获取页面可视区的宽高.
        console.log($(window).width()); // 获取可视区宽度
        console.log($(window).height());  // 获取可视区高度
    })
})

8.3 offset方法与position方法

// input #btn1 #btn2 ,div #father 为同级元素 #son为#father子元素
$(function () {
    //1.offset()
    //获取会得到一个对象,对象里面包含了top和left的值.
    //offset方法获取元素距离document的位置
    $('#btn1').click(function () {
        console.log($('#son').offset());
    });

    //2.position();
    //获取会得到一个对象,对象里面包含了top和left的值.
    //position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
    $('#btn2').click(function () {
        console.log($('#son').position());
    });
});

8.4 scrollLfet()和scrollTop()

// input #btn ,div为同级元素 img为div的子元素
$(function () {
    //给按钮设置一个点击事件.
    $('#btn').click(function () {
        //获取
        //scrollLeft() 表示元素内容被卷曲出去的宽度.
        //scrollTop() 表示元素内容被卷曲出去的高度
        // console.log($('div').scrollLeft() + ":" + $('div').scrollTop());

        //设置
        //设置元素内容被卷曲出去的高度或者宽度.
        // $('div').scrollLeft(217);
        // $('div').scrollTop(217);

        console.log($(window).scrollTop());  // 获取页面被卷曲的高度
        console.log($(window).scrollLeft());  // 获取页面被卷曲的宽度

        //设置页面被卷曲出去的距离.
        $(window).scrollTop(1000);
        $(window).scrollLeft(1000);
    });
});

9. 事件机制

9.1 mouseenter和mouseleave

mouseover事件在鼠标移动到选取的元素及其子元素上时触发
mouseenter事件只在鼠标移动到选取的元素上时触发
mouseleave 事件只有在鼠标指针离开被选元素时被触发
mouseout 事件在鼠标指针离开任意子元素时也会被触发

9.2 jQuery时间发展历程及on

// input div span 为同级元素
$(function () {
    //用原生的js给div注册单击事件.
    //原生js注册相同的事件,后面的会把前面的给覆盖.
    /*document.getElementById("one").onclick = function () {
      alert('单击事件');
    };
    document.getElementById("one").onclick = function () {
      alert('单击事件.啦啦啦');
    };*/

    //jQuery
    //给同一个元素注册同样的事件,后面的不会把前面的给覆盖.
    /*$('#one').click(function () {
      alert('单击事件');
    });
    $('#one').click(function () {
      alert('单击事件,lallal ');
    });*/

    //给按钮设置点击事件,创建一个div.
    $('#btn').click(function () {
        var $divNew = $('<div class="two"></div>');
        $('body').append($divNew);
    });

    //jQuery注册事件的发展历程. (了解)
    //1.简单事件绑定 click(); 不支持同时注册,也不支持动态注册.
    /*$('div').click(function () {
      console.log("鼠标单击事件");
    });
    $('div').mouseenter(function () {
      console.log("鼠标移入事件...");
    });*/

    //2. bind方式注册事件 支持同时注册,也不支持动态注册.
    /*$('div').bind({
      mouseenter: function () {
        console.log("鼠标移入事件...");
      },
      click: function () {
        console.log("鼠标单击事件");
      }
    });*/

    //3.delegate注册委托事件-原理是事件冒泡. 支持同时注册,也支持动态注册.
    /*$('body').delegate('div',{
      mouseenter: function () {
        console.log("鼠标移入事件");
      },
      click: function () {
        console.log("鼠标单击事件");
      }
    });*/

    //4.jQuery1.7之后，jQuery用on统一了所有事件的注册方式。
    //4.1 on简单注册事件. 不支持动态注册的.
    /*$('div').on('click', function () {
      console.log("我是单击事件...");
    });*/

    //4.2 on委托注册 支持动态注册的. $(触发事件的父级元素)绑定代理事件
    $('body').on('click', 'div,span', function () {
        console.log("单击事件.");
    });
})

9.3 事件解绑off()

// input #btn1 #btn2,div #one是同级元素
$(function () {
    //jQuery用on来注册事件,那就用off来解绑事件.
    //off()不给参数就是解绑所有的事件.
    //off('click')解绑指定的事件.

    //1.注册事件.
    $('#btn1').on('click', function () {
        //给div注册事件.
        $('#one').on({
            'click': function () {
                console.log("单击事件");
            },
            'mouseenter': function () {
                console.log("鼠标移入事件");
            }
        });
    });

    //2.移除事件.
    $('#btn2').on('click', function () {
        //给div解绑事件.
        //$('#one').off();//解绑所有事件.
        $('#one').off('click');//解绑click事件.
    });

});

9.4 事件触发trigger()

// input #btn1 #btn2,div #one是同级元素
$(function () {
    //事件触发 trigger.
    //a.代码的方式来触发事件.
    //b.可以使用他来触发自定义事件.

    /*//1.给div注册一个单击事件.
   $('#one').on('click', function () {
     console.log("单击事件....");
   });

   //2.给按钮注册事件.
   var i = 0;
   $('#btn1').on('click', function () {
     i++;
     if(i === 3){
       //条件满足,触发div的单击事件.
       //事件触发.感觉就是用代码的方式来触发事件.
       //$('#one').click();
       $('#one').trigger('click');
     }
   });*/

    //给div注册一个自定义事件.
    $('#one').on('linge', function () {
        console.log("啦啦,我是林哥事件.");
    });

    //那我现在就是要触发他怎么办?就可以使用触发器trigger.
    $('#btn2').on('click', function () {
        var res = confirm('请问林哥帅吗');
        if(res){
            //触发自定义的linge事件.
            $('#one').trigger('linge');
        }
    });
});

9.5 jQuery事件对象

// input #btn,a是同级元素    div #one是他们的父级元素
$(function () {
    //1.什么是事件对象.
    //注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息
    //比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息....
    //jQuery中用事件参数e来获取.
    //jQuery的事件对象是对原生js事件对象的一个封装,帮你处理好了兼容性.
    $('#one').on('click', function (e) {
        //2.事件对象中有常用的三个坐标.
        console.log("screenX"+ e.screenX +" : " + e.screenY); //触发事件那一点距离 屏幕最左上角的值
        console.log("clientX"+ e.clientX +" : " + e.clientY); //触发事件那一点距离 可视区左上角的值
        console.log("pageX"+ e.pageX +" : " + e.pageY); //触发事件那一点距离  页面左上角的值
        alert("我是div的单击事件.");
    });

    //3.给按钮注册一个单击事件.
    $('#btn').on('click', function (e) {
        alert('我是按钮的单击事件');
        e.stopPropagation();//阻止事件冒泡.
    });

    //4.给a标签注册一个单击事件.
    $('a').on('click', function (e) {
        alert('我是a标签的单击事件....');
        // //阻止事件冒泡
        // e.stopPropagation();
        // //阻止默认行为-阻止a标签的跳转.
        // e.preventDefault();
        //既能阻止事件冒泡,又能阻止默认行为.
        return false;
    });

    //5.给页面注册键盘按下事件.
    $(document).on('keydown', function (e) {
        //e.keyCode能获取按的是那个键.
        console.log(e.keyCode);
    });
});

10. 补充知识点

10.1 链式编程与end

$(function () {
    //链式编程
    //1.什么时候可以链式编程?
    //如果给元素调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续再点出jQuery方法.
    // $('div').width(100).height(100).css('backgroundColor','red');

    //2.必须是jQuery对象才能点出jQuery方法.
    // console.log($('div').width(100).width()); //100
    // $('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法.

    //3.有些时候我们一个方法返回的确实是一个jQuery对象
    //但是这个对象又不是我们想要的对象,那这个时候就不要再继续点下去了..

    //4.end(); //回到上一个状态.
    //$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

    //5.end()方法他也是jQuery方法,那他也需要一个jQuery对象才能点出了啊,
    //width()方法返回的是一个数值, 数值能点出end()方法来吗? 显然不行.
    $('div').width(100).width().end().height(100); //不行
});

10.2 显示迭代each()

// ul #ulList li*10
$(function () {
    //需求:找到所有的li标签,分别设置透明度,透明度是递增到1.

    //1.获取所有的li标签.
    var $lis = $('#ulList').children();

    //2.给$lis里面的每一个li标签设置透明度.
    //$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.

    //给每一个对象设置不同的值的时候
    //作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
    $lis.each(function (index,element) {
        // console.log(index); //每一个li标签的索引
        // console.log(element);//每一个li标签,是一个dom对象.
        $(element).css('opacity',(index+1)/10);
    });
});

10.3 多库共存

//1.如何查看jQuery的版本?
//通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
//通过以下四种方式可以查看jQuery的版本.
// console.log(jQuery.fn.jquery);
// console.log(jQuery.prototype.jquery);
// console.log($.fn.jquery);
// console.log($.prototype.jquery);

//2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
//那个文件后引入,使用的$就是谁的.
//console.log($.fn.jquery);


//3.多库共存
/*var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
  (function ($) {
    //在这个自执行函数中,就可以继续使用$了.
  }(_$));
  console.log(_$.fn.jquery);  //1.12.4
  console.log(jQuery.fn.jquery);  //1.12.4
  console.log($.fn.jquery); //3.4.1 */

//4.多库共存2
var _$341 = $.noConflict(); //3.4.1版本的jQuery把$的控制权给释放了
var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了
console.log($);   // undefined
console.log(_$1124.fn.jquery);  // 3.4.1
console.log(_$341.fn.jquery); // 1.12.4

//$lis.css('opacity',0.5);//如果这样设置的话,由于隐式迭代那每一个li标签的透明度都设置成了0.5,不符合需求.

//给每一个对象设置不同的值的时候
//作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
$lis.each(function (index,element) {
    // console.log(index); //每一个li标签的索引
    // console.log(element);//每一个li标签,是一个dom对象.
    $(element).css('opacity',(index+1)/10);
});

});


#### 10.3 多库共存

```javascript
//1.如何查看jQuery的版本?
//通过jQuery文件名来查看jQuery的版本是不靠谱的做法.
//通过以下四种方式可以查看jQuery的版本.
// console.log(jQuery.fn.jquery);
// console.log(jQuery.prototype.jquery);
// console.log($.fn.jquery);
// console.log($.prototype.jquery);

//2.如果引入了多个jQuery文件. 那使用的$是哪一个jQuery文件中的呢?
//那个文件后引入,使用的$就是谁的.
//console.log($.fn.jquery);


//3.多库共存
/*var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
  (function ($) {
    //在这个自执行函数中,就可以继续使用$了.
  }(_$));
  console.log(_$.fn.jquery);  //1.12.4
  console.log(jQuery.fn.jquery);  //1.12.4
  console.log($.fn.jquery); //3.4.1 */

//4.多库共存2
var _$341 = $.noConflict(); //3.4.1版本的jQuery把$的控制权给释放了
var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了
console.log($);   // undefined
console.log(_$1124.fn.jquery);  // 3.4.1
console.log(_$341.fn.jquery); // 1.12.4

栀虞子

关注

0
点赞
踩
2

收藏

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

1. 初始JQuery1.1 原生js的缺点1.2 体验jQuery2. JQuery的基础2.1 jQuery的入口函数2.2 $是一个函数2.3 DOM对象和jQuery对象3. jQuery元素设置3.1 设置获取文本内容text()3.2 设置获取样式css()3.3 设置类名class()3.4 设置属性attr()3.5 prop()操作布尔类型的属性4. 选择器4.1 基本选择器4.2 层级选择器4.3 过滤选择器-隔行变色4.4 筛选选择器(方法)5. 动画5.1 基本动画5.1.1 显示.
复制链接

扫一扫