jQuery基本知识总结

最新推荐文章于 2022-05-22 16:42:44 发布

Fighting宁

最新推荐文章于 2022-05-22 16:42:44 发布

阅读量717

点赞数 1

分类专栏： JQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43794749/article/details/102217645

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery
- 1.jquery是什么
- 2.jQuery的特点
- 3.jQuery的版本
- 4.使用jQuery
二、jQuery对象和DOM对象【重点】
- 1 DOM对象
- 2.jQuery对象
三、jQuery注册事件
四、体会隐式迭代
五、this
六、jQuery操作样式
- 1 设置样式
- 2.获取样式值
七、选择器的使用
- 1.基本选择器
- 2 层级选择器
- 3.过滤器选择器
- 4.选择器筛选方法
八、jQuery 操作类样式
- 1 添加类名
- 2.移除类名
- 3 检测类名是否存在
- 4 类名切换
- 5.排它思想
- 6.index()的使用
九、jQuery中入口函数
十、jQuery实现动画
- 1 基本动画
十一、jQuery操作属性
- 1 设置标签的属性
- 2 获取标签属性值
- 3 移除标签的属性
- 4 prop方法操作属性
十二、jQuery操作元素内容
- 1 操作标签内部的文本
- 2 操作标签内部的所有内容
- 3 操作表单元素的内容
十三、jQuery动态操作元素
- 1 jQuery创建元素
- 2 jQuery追加元素
- - 1.向父元素最后追加
  - 2 向父元素最前面追加
- 3.jQuery删除元素
- 4 jQuery清空元素
十四、jQuery操作元素的尺寸
- 1 width和height方法
- 2 innerWidth和innerHeight方法
- 3 outerWidth和outerHeight方法
十五、jQuery操作元素的位置
- 1 获取元素距离文档的位置
- 2 获取元素距离上级定位元素的位置
- 3 操作卷去的页面间距
十六、jQuery事件操作
- 1 简单方式注册事件
- 2 on方法注册事件
- 3.off方法移除事件
- 4.jq的事件委托
- 4 触发事件
- 5.事件对象
十七、链式编程
- 1 什么是链式编程
- 2 end方法的使用
十八、本地存储
十九、JSON对象

一、jQuery

1.jquery是什么

jQuery是使用js封装的一个方法库，封装了我们开发过程中常用的一些功能，方便我们来调用，大大提高了我们的开发效率

2.jQuery的特点

少写，多做！
开源、免费！
可以链式编程！
隐式迭代！
丰富的插件！
可扩展性强！（自己扩展，自己写插件）

3.jQuery的版本

jQuery下载地址：jQuery
v1.xx版本(使用)

v2.xx版本和v3.xx版本(最新版,是v2.xx版本的延续)

区别:2.x和3.x版本不再支持IE678,考虑到兼容性的话,还是使用1.xx版本

同版本还有两个文件:(压缩和不压缩的区别)

min：压缩版，压缩过后，体积会更小压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。压缩的主要目的：就是让文件变的更小。

两个文件的选择建议: 平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。

4.使用jQuery

<!---引入jQuery文件-->
<script src="jquery-1.12.4.js"></script>
<script>
	// 写jQuery代码
</script>

注意：使用jQuery一定先要引入jQuery

二、jQuery对象和DOM对象【重点】

1 DOM对象

在WebAPI中，通过DOM的方式所获取的元素，就是DOM对象。

webAPI中通过任何方式获取的元素都是DOM对象
DOM对象仅仅只能调用自身的属性和方法，无法调用jQuery库中的方法

2.jQuery对象

2.1认识$标识符

- 是一个函数
- 参数selector，表示调用该函数时，需要传入一个字符串格式的选择器，函数调用：$(selector)
- 调用完毕后，返回了一个jQuery对象
- jQuery标识符 和  $指的是同一个函数
- 推荐使用$

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    console.log($);
    // $是一个函数
    // 函数调用：$(selector)
    // 返回值，返回一个jQuery对象
    // jQuery和$标识符是一样的，推荐使用$
    var btn =  $('button');
    console.log(btn instanceof jQuery);// true
    console.log(jQuery); // jQuery标识符也是函数和$一样
    console.log(jQuery===$);  // true
  </script>
</body>

2.2、jQuery对象

jQuery对象：用jQuery获取的元素
语法:$(‘选择器’); 返回一个jQuery对象

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // jQuery对象：用jQuery获取的元素
    // 语法：$('选择器');  返回jQuery对象
    var btn = $('button');
    btn.hide();
    // jQuery对象可以调用jQuery库中的任何方法。
    // 注意：jQuery对象无法使用DOM对象中的属性或方法
    // btn.addEventListener('click',function(){});//无法调用
  </script>
</body>

2.3、jQuery对象的本质

本质是一个伪数组
伪数组中的个体是DOM对象。

 <div>我是一个盒子</div>
  <script src="0lib/jquery-1.12.4.js"></script>
  <script>
    // jQuery对象
    var $element = $('div');
    // jQuery对象转DOM对象的方式：jQuery对象[索引]
    console.log($element[0].innerText);
  
  </script>

2.4、DOM对象转jQuery对象

语法：$(dom对象)；返回一个转换后的jQuery对象

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取DOM对象
    var btn = document.querySelector('button');
    // btn.hide(); 报错，无法调用

    // DOM对象转换jQuery对象
    var newBtn = $(btn);
    newBtn.hide();

  </script>
</body>

2.5、jQuery对象转DOM对象

语法1：jQuery对象[索引];
语法2：jQuery对象.get(索引);

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 认识jQuery对象的本质？
    var btn = $('button');
    console.log(btn);

    // jQuery对象本质上就是一个伪数组，这个伪数组整体称为jQuery对象
    // jQuery对象伪数组中的个体是DOM对象
    // 语法：jQuery对象[索引] 推荐使用
    // 语法：jQuery对象.get(索引)
    console.dir(btn[0]);
    console.dir(btn[1]);
    console.dir(btn.get(0));
    console.dir(btn[0] instanceof jQuery);

  </script>
</body>

三、jQuery注册事件

语法：$(‘选择器’). 事件名(事件处理程序);

<body>
  <button>按钮1</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取按钮对应jQuery对象
    // 事件名不加on
    $('button').click(function(){
      alert('小刚刚，真是帅！');
    })

  </script>
</body>

四、体会隐式迭代

<body>
   <button>我是按钮1</button>
   <button>我是按钮2</button>
   <button>我是按钮3</button>
   <button>我是按钮4</button>
   <button>我是按钮5</button>
   <script src="lib/jquery-1.12.4.js"></script>
   <script>
    // 【DOM方式→必须写循环】
    //  // 获取一组按钮
    //  var btns = document.querySelectorAll('button');
    //  // 能直接给组注册吗？ 在DOM中不行！
    //  for(var i = 0; i< btns.length; i++) {
    //    btns[i].onclick = function() {
    //      alert('燃烧我的脂肪！')
    //    };
    //  }
    // 【jQuery方式注册事件】
    // 在给jQuery对象注册事件时，jQuery内部会自动循环遍历每一个元素，并注册事件（我们看不见）→ 隐式迭代
    var btns = $('button');
    btns.click( function(){
      alert('燃烧我的脂肪！')
    } );
    // btns.hide();
   </script>
</body>

五、this

<body>
   <button>我是按钮1</button>
   <button>我是按钮2</button>
   <button>我是按钮3</button>
   <button>我是按钮4</button>
   <button>我是按钮5</button>
   <script src="lib/jquery-1.12.4.js"></script>
   <script>
    var btns = $('button');
    btns.click( function(){
      // this关键字代表事件源，点击谁，谁就是事件源
      // this代表的是DOM对象
      // console.log(this.innerText);
      // 若要使用jquery对象中的方法，需要$(this)转换
      $(this).hide();
    } );
    // btns.hide();
   </script>
</body>

六、jQuery操作样式

1 设置样式

设置单个样式：
jQuery对象.css(name,value);
设置多个样式：
设置多个样式

jQuery对象.css({

name:value,

name:value,

name:value,

name:value

});

2.获取样式值

语法： jQuery对象.css(‘样式属性名’);


<body>
  <button>我是按钮1</button>
  <!-- <button>我是按钮2</button>
  <button>我是按钮3</button>
  <button>我是按钮4</button>
  <button>我是按钮5</button> -->
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 【设置单个样式】
    // $('button').css('color', 'red');
    // $('button').css('width', '100px');
    // // $('button').css('height','100px');
    // // 若值是数字时，可以直接写数字，不加单位
    // $('button').css('height', 100);
    // 【设置多个样式】
    $('button').css({
      width:200,
      height:300,
      background:'hotpink'
    });
    // 【获取】
    var v = $('button').css('width');
    var v2 = $('button').css('height');
    console.log(v);
    console.log(v2);
    console.log(parseInt(v));
  </script>
</body>

七、选择器的使用

1.基本选择器

2 层级选择器

3.过滤器选择器

伪类选择器都带冒号:

4.选择器筛选方法

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法


<body>
  <div>
    <button>按钮</button>
  </div>
  <ul id="ul1">
    <li>
      子元素
      <ul>
        <li>孙子元素</li>
        <li>孙子元素</li>
        <li>孙子元素</li>
      </ul>
    </li>
    <li>
      子元素
      <ul>
        <li>孙子元素</li>
        <li>孙子元素</li>
        <li>孙子元素</li>
      </ul>
    </li>
  </ul>

  <ol>
    <li>我是列表项</li>
    <li>我是列表项</li>
  </ol>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    var btn = $('button');
    // 获取父元素
    var r = btn.parent();  // 获取的父元素→jQuery对象
    console.log(r);
    var r2 = btn.parent().parent(); // 获取body→jQuery对象
    console.log(r2)

    // 获取子元素（仅仅是儿子）
    var lis = $('#ul1').children('li');
    console.log(lis);

    // 获取后代元素（子子孙孙）
    var lis = $('#ul1').find('li');
    console.log(lis);

    // 获取指定的元素
    console.log($('ol li:eq(0)'))
    console.log($('ol li').eq(0))  // 推荐使用


    
  </script>
</body>

八、jQuery 操作类样式

DOM对象.className = ‘类名类名类名’

1 添加类名

语法：jQuery对象.addClass(‘类名’);

<div></div>
<script>
   $('div').addClass('show');
</script>

2.移除类名

语法：jQuery对象.removeClass(‘类名类名类名’); 删除指定的类名
语法：jQuery对象.removeClass(); 不传参数，表示删除所有的类名

<div></div>
<script>
   $('div').removeClass('show');
</script>

3 检测类名是否存在

语法：jQuery对象.hasClass(‘类名’); 返回true和false

<div></div>
<script>
   var isHas = $('div').hasClass('show');
   console.log(isHas); // false;
</script>

4 类名切换

语法：jQuery对象.toggleClass(‘类名’); 若这个类名存在，则会移除该类名。否则添加该类名

<div></div>
<script>
   $('div').toggleClass('show');
</script>

5.排它思想

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    button {
      background: #666;
    }
  </style>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 需求：点击按钮更改按钮的背景色，其他恢复默认
    
    // $('button').click(function(){
    //   // 自己变为红色，其他兄弟变为灰色
    //   $(this).css('background','red');
    //   // 当前元素的其他兄弟
    //   $(this).siblings('button').css('background','#666');
    // });

    $('button').click(function(){
      // 自己变为红色，其 他兄弟变为灰色
      $(this)   // 当前的按钮
      .css('background','red')  // 设置当前按钮的样式
      .siblings('button')   // 当前按钮的其他兄弟们
      .css('background','#666'); // 设置其他兄弟们的样式

    });
  </script>
</body>

6.index()的使用


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul class="ul1">
    <li>我是第一ul中的li</li>
    <li>我是第一ul中的li</li>
    <li>我是第一ul中的li</li>
    <li>我是第一ul中的li</li>
    <li>我是第一ul中的li</li>
  </ul>

  <ul class="ul2">
    <li>我是第二ul中的li</li>
    <li>我是第二ul中的li</li>
    <li>我是第二ul中的li</li>
    <li>我是第二ul中的li</li>
    <li>我是第二ul中的li</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    $('.ul1 li').click(function () {
      // $(this)
      // jQuery对象.index(); 获取元素在标签结构中的索引
      var i = $(this).index();
      alert(i);
    });

    // $('li').click(function () {
    //   // $(this)
    //   // jQuery对象.index(); 获取元素在标签结构中的索引
    //   var i = $(this).index();
    //   alert(i);
    // });

   $('.ul2 li').click(function () {
      // $(this)
      // jQuery对象.index(); 获取元素在标签结构中的索引
      var i = $(this).index() + $('.ul1 li').length;
      alert(i);
    });
  </script>
</body>

九、jQuery中入口函数

目的：可以在body之前写js代码
window.onload 等页面加载完毕后执行(所有资源DOM树、外联其他文件、媒体资源)
jQuery中的入口函数，页面加载完毕后（仅仅DOM树加载完就可以）要执行的程序
语法1：

$(document).ready(function(){
    
    // 要执行的程序
});

语法2

$(function(){
   // 要执行的程序
})；


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // DOM中的onload事件（页面加载完毕后执行→文档树、图片、外联资源）
    window.onload = function () {
      // console.log( $('button') );
      console.log(1);
    }

    // jQuery中入口函数
    // $(document).ready(function(){
    //   console.log( $('button') );
    // });

    // jQuery中入口函数(页面加载完毕后执行→仅仅等标签加载完或文档树）
    $(function () {
      // console.log($('button'));
      console.log(2);

    });
  </script>
</head>

<body>
  <button>按钮</button>
</body>

十、jQuery实现动画

1 基本动画

基本动画最终：要么显示、要么隐藏

1.基本动画 (缩放)

显示语法：jQuery对象.show(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒，‘slow’、‘fast’、’normal’
- 参数easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
- 参数fn，动画完毕后要执行的函数，函数
隐藏语法：jQuery对象.hide(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
切换：jQuery对象.toggle(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
   div {
     width: 200px;
     height: 500px;
     background: hotpink;
     display: none;
   }
 </style>
</head>

<body>
 <button class="btn1">显示-show</button>
 <button class="btn2">隐藏-hide</button>
 <button class="btn3">切换-toggle</button>
 <div></div>
 <script src="lib/jquery-1.12.4.js"></script>
 <script>
   // 显示
   $('.btn1').click(function () {
   //  $('div').show('fast');
   //  $('div').show(1000,'linear');
    $('div').show(1000);
   });
   // 隐藏
   $('.btn2').click(function () {
     $("div").hide(1000);
   });
   // 显示隐藏切换
   $('.btn3').click(function () {
     $("div").toggle(1000);
   
   })
 </script>
</body>


<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
   div {
     width: 200px;
     height: 500px;
     background: hotpink;
     display: none;
   }
 </style>
</head>

<body>
 <button class="btn1">动画完毕后，背景色为绿色</button>
 <div></div>
 <script src="lib/jquery-1.12.4.js"></script>
 <script>
   // 显示
   // $('.btn1').click(function () {
   //   $('div').show(3000,'linear');
   //   $('div').css('background','green');
   //   // 问题：先变绿，再动画
   //   // 原因：定时器代码会延迟执行。
   //   // 解决方案：使用fn参数解决
   // });


   $('.btn1').click(function () {
     $('div').show(3000,'linear',function(){
       $('div').css('background','green');
     });

     // 第三个参数：表示动画完毕后执行。
     // JS高级→原理，目前先会用
   });
 </script>
</body>

2.基本动画2（下拉和向上卷去）

显示语法：jQuery对象.slideDown(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
隐藏语法：jQuery对象.slideUp(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
切换：jQuery对象.slideToggle(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 500px;
      background: hotpink;
      display: none;
    }
  </style>
</head>

<body>
  <button class="btn1">显示-slideDown</button>
  <button class="btn2">隐藏-slideUp</button>
  <button class="btn3">切换-slideToggle</button>
  <div></div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 显示
    $('.btn1').click(function () {
     $('div').slideDown(500);
    });
    // 隐藏
    $('.btn2').click(function () {
      $('div').slideUp(500);
    });
    // 显示隐藏切换
    $('.btn3').click(function () {
      $('div').slideToggle(500);
    })
  </script>
</body>

3.基本动画3(淡入淡出)

显示语法：jQuery对象.fadeIn(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
隐藏语法：jQuery对象.fadeOut(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
切换：jQuery对象.fadeToggle(speed,easing,fn);
- 参数speed，动画时长，数字→毫秒
- easing，运动的方式，默认swing表示缓冲,还有linear表示匀速
动画设置透明度：jQuery对象.fadeTo(speed,value);
- 参数speed，动画时长，数字→毫秒
- value,透明度值


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 500px;
      background: hotpink;
      display: none;
    }
  </style>
</head>

<body>
  <button class="btn1">显示-fadeIn</button>
  <button class="btn2">隐藏-fadeOut</button>
  <button class="btn3">切换-fadeToggle</button>
  <button class="btn4">显示到指定透明度-fadeTo</button>
  <div></div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 显示
    $('.btn1').click(function () {
      $('div').fadeIn(500);
    });
    // 隐藏
    $('.btn2').click(function () {
      $('div').fadeOut(500);

    });
    // 显示隐藏切换
    $('.btn3').click(function () {
      $('div').fadeToggle(500);

    })
    // 显示到指定透明度
    $('.btn4').click(function () {
      $('div').fadeTo(500,0.5);

    })
  </script>
</body>

4.自定义动画

语法：jQuery对象.animate(params,[speed],[easing],[fn])

参数：param 需要传入一个对象
- animage({
  
  样式属性名:目标值,
  
  样式属性名:目标值
  
  },1000)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 20px;
      height: 20px;
      background: red;
      position: absolute;
      left: 0;
      top: 50px;
    }
  </style>
</head>

<body>
  <button class="btn1">自定义动画</button>
  <div></div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 自定义动画
    $('.btn1').click(function () {
      $('div').animate({
        width:500,
        height:200,
        left:600,
        top:200
      },2000);
    });
  </script>
</body>

5.停止动画

jQuery对象.stop();
可以解决动画队列问题，一般在动画之前调用stop方法

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin:0 auto;
    }
    div{
      width: 200px;
      margin:100px auto;
    }
    span {
      border:1px solid #666;
      text-align: center;
      line-height: 20px;
      display: block;
      width: 200px;
    }
    p {
      height: 300px;
      background: red;
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <span>标题1</span>
    <p></p>
  </div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    $('div').mouseenter(function(){
      $('p').stop().slideDown(500);
    });
    $('div').mouseleave(function(){
      $('p').stop().slideUp(500);
    });

    //不写停止动画
    // $('div').mouseenter(function(){
    //   $('p').slideDown(500);
    // });
    // $('div').mouseleave(function(){
    //   $('p').slideUp(500);
    // });
  </script>
</body>

十一、jQuery操作属性

系统给的：id、title、src、href… DOM对象.属性名

自定义的：pid; DOM对象.get/set/removeAttribute(‘name’,value)

1 设置标签的属性

语法：jQuery对象.attr(name,value);

<body>
  <div id="box" title="这是div" pid="10086">鬼斧神工</div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
     // 获取
     var pid = $('div').attr('pid');
     console.log(pid);

    // 设置→ 添加、更改
    $('div').attr('age','100');  // 添加
    $('div').attr('pid','10010');  // 修改

    // 删除
    $('div').removeAttr('age');

    // 自定义属性作用：可以把一些数据暂存到标签上
  </script>
</body>

2 获取标签属性值

语法：jQuery对象.attr(name);

3 移除标签的属性

语法：removeAttr(name);

4 prop方法操作属性

针对：selected、checked、disabled
语法：$(‘input’).prop(‘属性名’);

<input type="checkbox" />
</script>
  var isC = $('input').prop('checked');  
  console.log(isC); // false;
</script>

设置
- 语法：$(‘input’).prop(‘属性名’,值);

<input type="checkbox" />
</script>
  $('input').prop('checked',true);  
</script>

<body>
  <input type="checkbox">
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取
    // var v = $('input').prop('checked');
    // var v = $('input')[0].prop('checked');  // 报错，因为$('input')[0]DOM对象
    // var v = $('input')[0].checked;  // 可以执行，checked属性可以让DOM对象直接调用
    // console.log(v);


    // 设置
    $('input').prop('checked',true);
    // $('input')[0].checked = true;
  </script>
</body>

十二、jQuery操作元素内容

1 操作标签内部的文本

获取：仅仅是文本
- 语法：jQuery对象.text();
设置：若设置标签时，标签会被当做普通文本
- 语法：jQuery对象.text(‘文本内容’);

2 操作标签内部的所有内容

获取：文本和内部标签
- 语法：jQuery对象.html();
设置：若设置标签时，标签会被渲染
- 语法：jQuery对象.html(‘文本内容’);

3 操作表单元素的内容

获取：表单元素的value
- 语法：jQuery对象.val();
设置：表单元素的value
- 语法：jQuery对象.val(‘文本内容’);

<body>
 <div>
   <h1>我是标题</h1>
 </div>
 <input type="text" value="张三">

 <script src="lib/jquery-1.12.4.js"></script>
 <script>
   // text方法
   // 获取
   var v = $('div').text();
   console.log(v);
   // 设置
   $('div').text('<a href="#">超链接</a>');


   // html方法
   // 获取
   var v = $('div').html();
   console.log(v);
   // 设置
   $('div').html('<a href="#">超链接</a>');


   // val方法
   // 获取
   var v = $('input').val();
   console.log(v);
   // 设置
   $('input').val('李四');
 </script>
</body>

十三、jQuery动态操作元素

1 jQuery创建元素

语法：$('<li></li>') ，返回一个新创建的jQuery对象

2 jQuery追加元素

1.向父元素最后追加

语法：新创建jQuery对象.appendTo(‘父元素选择器’ 或父元素jQuery对象);
语法：父元素jQuery对象.apeend(新创建的jQuery对象);

2 向父元素最前面追加

语法：新创建jQuery对象.prependTo(‘父元素选择器’);
语法：父元素jQuery对象.prepend(新创建的jQuery对象);

<body>
  <button class="btn1">添加li到后面</button>
  <button class="btn2">添加li到前面</button>
  <ul>
    <li>我是已有的列表项</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 给按钮注册click
    $('.btn1').click(function () {
      // 创建jQuery对象
      var li = $('<li></li>').text(Math.random());
      // 追加
      li.appendTo('ul');
      // li.appendTo( $('ul') );

      // $('ul').append(li);
    });


     // 给按钮注册click
     $('.btn2').click(function () {
      // 创建jQuery对象
      var li = $('<li></li>').text(Math.random());
      // 追加
      // li.prependTo('ul');
      $('ul').prepend(li);
    });
  </script>
</body>

3.jQuery删除元素

语法：jQuery对象.remove(); 删谁就让谁调用这个方法,删除之后html中也没有了

4 jQuery清空元素

清空元素内部所有的内容

清空方式1：jQuery对象.empty(); 推荐使用，清空内部的所有元素及元素相关的事件
清空方式2：jQuery对象.html(’’); 仅仅清空内部的元素，不清清理内中的元素的事件。

<body>
  <button class="btn1">删除第二li</button>
  <button class="btn2">清空</button>
  <ul>
    <li>我是已有的列表项1</li>
    <li>我是已有的列表项2</li>
    <li>我是已有的列表项2</li>
    <li>我是已有的列表项2</li>
    <li>我是已有的列表项2</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 删除第二元素
    $('.btn1').click(function(){
      $('li').eq(1).remove();
    });
    // 清空ul中的内容
    $('.btn2').click(function(){
      $('ul').empty(); // 推荐使用。
      // $('li').remove();
      // $('ul').html('');    // 不推荐使用，因为仅仅只是清除了结构，内存中相关的绑定不会马上清除
    });
      
  </script>
</body>

十四、jQuery操作元素的尺寸

1 width和height方法

操作的大小仅仅是内容部分(padding部分和border获取不到)
设置：
- 语法：jQuery对象.width(数字);
获取：
- 语法：jQuery对象.width();–>得到的也是数字

2 innerWidth和innerHeight方法

操作的大小是内容部分 + padding

设置：(设置时padding保持原有的值不变,内容大小改变)
- 语法：jQuery对象.innerWidth(数字);
获取：
- 语法：jQuery对象.innerWidth();

3 outerWidth和outerHeight方法

操作的大小是内容部分 + padding + border
设置：
- 语法：jQuery对象.outerWidth(数字);
获取：
- 语法：jQuery对象.outerWidth();


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      /* 内容 */
      width: 200px;
      height: 200px;
      /* 内边距 */
      padding: 10px;
      /* 边框 */
      border: 10px solid blue;
      background: red;
    }
  </style>
</head>

<body>
  <div></div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 以下操作获取使用更多！
    // 操作元素内容大小
    // 获取
    var v = $('div').width();
    console.log(v);
    // 设置
    $('div').width(300)


    // 操作元素内容大小 + padding
    // 获取
    var v = $('div').innerWidth();
    console.log(v);
    // 设置
    $('div').innerWidth(300)

    // 操作元素内容大小 + padding + border
    // 获取
    var v = $('div').outerWidth();
    console.log(v);
    // 设置
    $('div').outerWidth(300)
  </script>
</body>

十五、jQuery操作元素的位置

1 获取元素距离文档的位置

语法：jQuery对象.offset(); 返回一个对象，对象中包含了元素的位置
注意：

offset()方法获取的元素的位置，永远参照文档。和定位没有关系(文档可能大于浏览器)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .f {
      width: 500px;
      height: 500px;
      background: green;
      margin:800px auto;
      position: relative;
    }
    .s {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute
    }
  </style>
</head>
<body>
  <div class="f">
    <div class="s"></div>
  </div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // offset方法获取的位置永远参照文档，和定位没有关系
    // 返回一个对象
    var o = $('.s').offset();
    console.log(o.top);
    console.log(o.left);
  </script>
</body>

2 获取元素距离上级定位元素的位置

语法：jQuery对象.position(); 返回的一个对象，对象中包含了元素的位置
注意：

position()方法获取的元素的位置,参照最近的定位元素（和定位有关系）

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .f {
      width: 500px;
      height: 500px;
      background: green;
      margin:800px auto;
      /* 父相 */
      position: relative;
    }
    .s {
      width: 100px;
      height: 100px;
      background: red;
      /* 子绝 */                                                                                                                          
      position: absolute
    }
  </style>
</head>
<body>
  <div class="f">
    <div class="s"></div>
  </div>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取元素的位置和定位有关系（子绝父相）
    var o = $('.s').position();
    console.log(o);
    console.log(o.left);
    console.log(o.top);
  </script>
</body>

3 操作卷去的页面间距

获取
- 语法：jQuery对象.scrollTop(); 返回数字
设置
- 语法：jQuery对象.scrollTop(数字);

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
    }
    button {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }
  </style>
</head>
<body>
  <button>回到顶部</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 滚动条滚动事件 scroll
    // 给window注册事件
    // 若滚动条在窗口上时，事件注册给window
    $(window).scroll(function(){
      // 在jQuery中，若滚动条在窗口上时，获取卷去的位置，可以直接使用 $(window).scrollTop()
      // jQuery对象.scrollTop()
      // 获取页面卷去的间距
      var v = $(window).scrollTop();
      console.log(v);
    });

    // 回到顶部
    $('button').click(function(){
      // 设置页面卷去的间距
      // 【若不动画时，可以直接使用 $(window).scrollTop(数字);】
      // $(window).scrollTop(0);
      // 【若使用动画时，要使用$('html,body').animate({scrollTop:数字},时长);】
      // 原因：动画一定要动某个元素（标签）
      // document.body → body
      // document.documentElement → html
      $('html,body').animate({scrollTop:0},500);
    });
  </script>
</body>

十六、jQuery事件操作

1 简单方式注册事件

语法：jQuery对象.事件名(事件处理程序);(底层是addEventlistener)

    $('button').click(function(){
    });

2 on方法注册事件

注册简单事件语法：jQuery对象.on(‘事件名’,事件处理程序);

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // $('button').on('click', function () {
    //   console.log(1);
    // });

    // $('button').on('click', function () {
    //   console.log(2);
    // });

    // $('button').click(function(){
    //   console.log(1);
    // });
    // $('button').click(function(){
    //   console.log(2);
    // });
    
    // jQuery中的事件底层是：事件监听→ 事件叠加
    // DOM对象.addEventListener(事件名,事件处理程序)
  </script>
</body>

3.off方法移除事件

解绑简单的事件：jQuery对象.off(‘click’,事件处理程序名称)

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 事件处理程序1
    var fn1 = function () {
      console.log(1);
    };
    // 事件处理程序2
    var fn2 = function () {
      console.log(2);
    };

    // 注册→事件监听→事件会叠加
    $('button').on('click', fn1);
    $('button').on('click', fn2);

    // 移除事件
    // $('button').off('click', fn1);  // 使用较多
    // 扩展
    // $('button').off('click');  // 移除所有的该元素相关的点击的事件处理程序

  </script>
</body>

4.jq的事件委托

事件委托的实现：jQuery对象.on(‘事件名’,‘选择器’,事件处理程序);
- 选择器：子孙元素
- 注意：在事件处理程序中，this代表的是子孙元素（所点最先触发的）
解绑事件委托注册的事件：jQuery对象.off(‘click’,‘选择器’,事件处理程序名称)
js的事件委托

<body>
  <ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
    <li>我是列表项5</li>
    <li>我是列表项6</li>
    <li>我是列表项7</li>
    <li>我是列表项8</li>
    <li>我是列表项9</li>
    <li>我是列表项10</li>
  </ul>
  <script>
    // 事件委托目的：提高程序性能
    // 解决问题：绑定多个事件带来的消耗内存的问题
    // 事件委托：把子孙元素的事件注册给上级元素
    // 注意：子孙元素可以共享上级元素的事件。反之不行。
    // 使用事件委托：
    // 1. 给上级元素注册事件
    // 2. 通过事件对象提供的target来获取最先触发的元素
    // 3. 通过nodeName或类名检测指定的元素
    // 原理：事件冒泡
    // 1. 给上级元素注册事件
    var ul = document.querySelector('ul');
    ul.onclick = function(e){
      // 2. 通过事件对象提供的target来获取最先触发的元素
      var t = e.target;
      // 3.通过nodeName或类名检测指定的元素
      if(t.nodeName=="LI") {
        alert(t.innerText);
      }
    };
  </script>
</body>

jq的事件委托

<body>
  <ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
    <li>我是列表项5</li>
    <li>我是列表项6</li>
    <li>我是列表项7</li>
    <li>我是列表项8</li>
    <li>我是列表项9</li>
    <li>我是列表项10</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    //  事件委托的实现：jQuery对象.on('事件名','选择器',事件处理程序);
    $('ul').on('click','li',function(){
      // this关键字→点击的li
      alert( $(this).text() );
    });


    // var fn1 = function() {
    //   console.log(1);
    // };
    // var fn2 = function() {
    //   console.log(2);
    // };
    // // 注册
    // $('ul').on('click','li',fn1);
    // $('ul').on('click','li',fn2);
    // // 移除
    // $('ul').off('click','li',fn2);
  </script>
</body>

4 触发事件

语法：jQuery对象.trigger(‘事件名’);

<body>
  <button>按钮</button>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    $('button').click(function(){
      alert('按钮被点击了');
    });
    $('button').mouseenter(function(){
      alert('鼠标进入了按钮');
    });

    // 触发
    // $('button').trigger('click');
    // $('button').trigger('mouseenter');
  </script>
</body>

5.事件对象

如何获取事件对象？

事件处理程序的第一个形参-e

e||window.event； jQuery中不用处理兼容问题

鼠标事件对象相关的属性
- 事件对象.clientX/Y 参照浏览器
- 事件对象.pageX/Y 参照文档
- 事件对象.offsetX/Y 参照元素
键盘事件对象相关的属性
- 事件对象.keyCode 返回键码数字
- 事件对象.alt/shift/ctrlKey 返回是布尔值。检测是否按下（true）
公共的属性或方法

十七、链式编程

1 什么是链式编程

在jQuery中，若jQuery对象调用一些方法来做设置操作时，方法完毕后，内部会重新返回当前的jQuery对象，所以可以继续调用jQuery对象的其他方法，这种现象就是链式编程。

注意：若jQuery对象调用一些方法来做获取操作（内容、大小、位置、样式值等），方法完毕后，内部返回的不是jQuery对象，所以无法再继续调用jQuery对象的其他方法

  // 【正确的链式编程】
    $('li:eq(1)')
    // 调用完毕css方法后，css方法内部又将方法所属的jQuery对象返回。 【把第二个li返回】
    .css('color','red')
    // 切换成ul jQuery对象
    .parent()
    // 调用完毕css方法后，css方法内部又将方法所属的jQuery对象返回    【把ul返回】
    .css('background','blue');

    // var r = $('li:eq(1)').css('color','red');
    // console.log(r instanceof jQuery);


    // 【错误的链式编程】
    $('li:eq(1)')
    .css('color','red')
    // text方法在这里是读取li中的内容，该方法返回的不是jQuery对象，而是字符串内容 '我是li2'
    .text() 
    // 报错，因为字符串不是jQuery对象，所以无法调用其他jQuery对象的方法
    .parent()
    .css('background','blue');

    // var v = $('li:eq(1)').css('color','red').text() ;
    // console.log(v instanceof jQuery);

<body>
  <ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    $('li').eq(1)   // 找到【第二li对应的jQuery对象】
    .css('color','red')  // 设置，可以链式，原因：设置完毕后返回调用者→当前使用的jQuery对象
    .text('li2')  // 设置，可以链式，原因：设置完毕后返回调用者→当前使用的jQuery对象
    .css('width')  // 获取，返回了一个字符串数据，而字符串不是jQuery对象
    .text('----LI2----');  // 报错！

    // 问题：在链式最后出现错误
    // 原因：返回了一个字符串数据，而字符串不是jQuery对象，无法继续调用jQuery对象中的方法
    // 结论：在使用链式编程时，要观察jQuery对象的方法调用完毕后，是否又返回了jQuery对象。 若返回了，可以继续链式调用其他方法。否则，不可以调用其他方法。
    // 一般情况下在做获取操作时（大小、位置、内容....）,返回的一般不是jQuery对象
  </script>
</body>

2 end方法的使用

end 方法，在链式上可以回到上一个jQuery对象

 $('div').on('mouseover','span',function(){
      // 把当前触发的span及之前的所有同辈兄弟内容设置为实心→ ★
      // 把当前触发的span之后的所有同辈兄弟内容设置为空心→ ☆
      $(this)
      .text('★')
      .prevAll()
      .text('★')
      .end()      // $(this)
      .nextAll()
      .text('☆');
    });

```html
<body>
  <ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
  </ul>
  <script src="lib/jquery-1.12.4.js"></script>
  <script>
    // 之前的方式
    // $('li').eq(1) // 【第二个lijQuery对象】
    // .css('color','red')  // 设置完毕后，返回了第二个lijQuery对象
    // .parent()     // 返回了【uljQuery对象】
    // .css('border','1px solid blue')
    // .children('li').eq(1)  // 【第二个lijQuery对象】
    // .css('background','#000');

    // end方法的使用
    $('li').eq(1) // 【第二个lijQuery对象】
    .css('color','red')  // 设置完毕后，返回了第二个lijQuery对象
    .parent()     // 返回了【uljQuery对象】
    .css('border','1px solid blue')
    .end()   // 从uljQuery对象 切换到  第二个lijQuery对象
    .css('background','pink');



  </script>
</body>

十八、本地存储

目的：把数据以字符串的形式存储在本地浏览器。

不论在浏览器关闭后，还是下次开关机后，数据依然存储在本地。

语法：
设置数据到本地：localStorage.setItem(‘key’,‘value’);
读取本地指定的数据：localStorage.getItem(‘key’);

十九、JSON对象

目的：

将真正的数组转换成字符串格式的数据。
将字符串格式的数据转换为真正的数据。

语法：

JSON.parse(字符串格式数组); 返回真正的数组

    // 字符串格式的数组
    var strArr = '["张三","李四","王五"]';
    // 将字符串格式的数组转换为针对的数组
    var arr = JSON.parse(strArr);
    console.log(arr);  // ["张三", "李四", "王五"]
    console.log(arr instanceof Array); // true

JSON.stringify(数组)； // 返回一个字符串格式的数组

 // 数组
    var arr = ['张三','李四','王五','赵六'];
    // 转换为字符串格式的数组
    var str = JSON.stringify(arr);
    console.log(str); // '["张三","李四","王五","赵六"]'
    console.log(typeof str); // string

Fighting宁

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本知识总结

文章目录一、jQuery1.jquery是什么2.jQuery的特点3.jQuery的版本4.使用jQuery二、jQuery对象和DOM对象【重点】1 DOM对象2.jQuery对象2.1认识$标识符2.2、jQuery对象2.3、jQuery对象的本质2.4、DOM对象转jQuery对象2.5、jQuery对象转DOM对象三、jQuery注册事件四、体会隐式迭代五、this六、jQuery操作...
复制链接

扫一扫