jQuery篇

jQuery

1.为什么使用jQuery?

• js中window onload事件只能出现一次,如果出现多次,后面的事件会覆盖掉前面的事件

• js代码容错差

• 简单的动画效果实现很繁琐,例如简单的动画渐变效果

• jQuery的两大特点

  • 链式编程:比如 .show() 和. html()可以连写为.show().html().

  • 隐式迭代 : 隐式对应的是显式,隐式迭代的意思是: 在方法的内部循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用

2.什么是Jquery

• Jquery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率

• js库是把我们常用的复杂功能封装到简单的方法中,我们用的时候,将库直接引入然后调用方法即可

• 使用步骤

  • 

• 导入包的代码一定要放在js代码的最上面

3.入口函数

• 原生的js'的入口函数指的是:window.onload = function() {}

• jQuery的入口函数,有以下几个写法

  • 写法一: 文档加载完毕,图片不加字啊的时候,可以执行这个函数

    •  $(document).ready(function () {
                  alert(1);
              })

  • 写法二: 写法一的简洁版

    •  $(function () {
                  alert(1);
              });

  • 写法三: 文档加载完毕,图片也加载完毕的时候,在执行这个函数

    •  $(window).ready(function () {
                  alert(1);
              })

• jQuery入口函数与js入口函数的区别

  • 书写个数不同:

    • js的入口函数只能出现一次,出现多次会存在事件覆盖效果

    • jQuery的入口函数<可以出现任意多次,并不存在事件覆盖效果

  • 执行时机不同

    • js的入口函数是在所有的文件资源加载完成后,才执行,这些文件资源包括:页面文档,外部的js文件,外部的css文件,图片等

    • jQuery的入口函数,是在文档加载完成后,再执行,文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有额外部资源都加载完毕

4.jQuery的$符号

• jQuery使用$的原因:书写简洁,相对于其他字符与众不同,容易被记住,

• Jquery占用了我们两个变量: $和JQuery.在代码中这两个变量都是一样的

5.js中的DOM对象和jQuery对象的比较重点

• 二者的区别

  • 通过Jquery获取的元素是一个jq对象数组,其中包含着原生js中的DOM对象,

  • 对于这样一个div结构

    •  <div></div>
       <div id="app"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div></div>

    • js获取元素节点方式

      •      var myBox = document.getElementById("app");           //通过 id 获取单个元素
             var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
             var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

    • jQuery获取这些元素节点的方式:(获取的都是数组)

      •  //获取的是数组，里面包含着原生 JS 中的DOM对象。
             　　console.log($('#app'));
             　　console.log($('.box'));
             　　console.log($('div'));

    • 总结:jQuery就是把DOM对象重新包装一下,让其具有jQuery方法\

• 二者的相互转换

  • DOM对象转换为jQuery对象

    •  $(js对象);

  • jQuery对象转为DOM对象

    •  jquery对象[index];      //方式1（推荐）
       jquery对象.get(index);  //方式2

  • jquery对象转换成了DOM对象之后,可以直接调用DOM提供的一些功能,如\

    •  $('div')[1].style.backgroundColor = 'yellow';
       $('div')[3].style.backgroundColor = 'green';

6.jQuery的选择器

• 分为基本选择器,层级选择器,属性选择器

• 基本选择器

  •  $("#id")         //id选择器
     $("tagName")     //标签选择器
     $(".className")  //class选择器
     $("*")           //通用选择器
     ​
     $("div.c1")      // 交集选择器 找到有含有c1类的div标签
     $("#id, .className, tagName") //并集选择器

• 层级选择器

  •  $("x y");// x的所有后代y（子子孙孙）
     $("x > y");// x的所有儿子y（儿子）
     $("x + y")// 找到所有紧挨在x后面的y
     $("x ~ y")// x之后所有的兄弟y

• 属性选择器

  •  $('[href]')       //找所有含href属性的标签
     $('a[href]')      //找所有含href属性的a标签
     $('a[title="luffy"]') //找所有title属性是luffy的a标签
     $('a[title="baidu"]') //找所有title属性不是百度的a标签
     $('a[href^="https"]') //找所有href属性以https开头的a标签
     $('a[href$="html"]')  //找所有href属性以html结尾的a标签
     $('a[href*="i"]')  //找所有href属性中含有i的a标签
     $('a[href][title="luffy"]') //找所有含有href属性且title属性=luffy的a标签 

7.jQuery的筛选器

• 基本筛选器

  •  :first // 第一个
     :last // 最后一个
     :eq(index)// 索引等于index的那个元素
     :even // 匹配所有索引值为偶数的元素，从 0 开始计数
     :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
     :gt(index)// 匹配所有大于给定索引值的元素
     :lt(index)// 匹配所有小于给定索引值的元素
     :not(元素选择器)// 移除所有满足not条件的标签
     :has(元素选择器)// 根据含有某个后代筛选

• 表单筛选器

  •  type筛选器
     :text
     :password
     :file
     :radio
     :checkbox
     :submit
     :reset
     :button

• 其他属性筛选器

  •  :enabled
     :disabled
     :checked
     :selected

8.筛选器方法

•  //找兄弟
   $("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
   ​
   //找弟弟
   $("#id").next()
   $("#id").nextAll()
   $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
   ​
   //找哥哥
   $("#id").prev()
   $("#id").prevAll()
   $("#id").prevUntil("#i2")

   //找祖辈
   $("#id").parent()
   $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
   $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

   //找儿子
   $("#id").children();// 儿子们

   //过滤
   $("div").first() // 获取匹配的第一个元素
   $("div").last() // 获取匹配的最后一个元素
   $("div").eq(n) // 索引值等于指定值的元素，n是索引
   $("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
   $("div").find("p") //后代选择器，在所有div标签中找后代的p标签
   $("div").filter(".c1")  // 交集选择器，从结果集中过滤出有c1样式类的
   $("div").has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

9.jQuery绑定事件

•  为button按钮绑定单击事件，单机按钮弹出警告框
   $('button').click(
           function () {
               alert('wahaha')
           }
   )

10.jQuery操作标签

• 标签内文本操作

  • html标签元素中所有的内容

     为button按钮绑定单击事件，单机按钮弹出警告框
     $('button').click(
             function () {
                 alert('wahaha')
             }
     )

  • text标签元素的文本内容

     //获取值：获取选中标签元素中的文本内容
     $('#box').text();
     ​
     //设置值：设置该所有的文本内容
     $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

• 文档标签操作

  • 插入标签

    • append和appendTo

       //追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
       父元素.append(子元素)
       ​
       //追加到某元素，子元素添加到父元素
       子元素.appendTo(父元素)

       //append
       var oli = document.createElement('li');
       oli.innerHTML = '哈哈哈';
       $('ul').append('<li>1233</li>');
       $('ul').append(oli);
       $('ul').append($('#app'));
       ​
       //appendTo
       $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

      注意:如果追加的jQuery对原本在文档树中,那么这些元素将从原位置上消失,简言之就是移动操作

    • prepend和prependTo

       // 前置添加， 添加到父元素的第一个位置
       父元素.prepend(子元素)；
       ​
       // 前置添加， 添加到父元素的第一个位置
       子元素.prependTo(父元素)；

    • after和insertAfter

       // 在匹配的元素之后插入内容 
       兄弟元素.after(要插入的兄弟元素)；
       要插入的兄弟元素.inserAfter(兄弟元素)；
       ​
       ​
       $('ul').after('<h4>我是一个h3标题</h4>')
       $('<h5>我是一个h2标题</h5>').insertAfter('ul')

    • before和onsertBefore

       // 在匹配的元素之前插入内容
       兄弟元素.before(要插入的兄弟元素)；
       要插入的兄弟元素.inserBefore(兄弟元素)；
        
       //示例
       $('ul').before('<h3>我是一个h3标题</h3>')
       $('<h2>我是一个h2标题</h2>').insertBefore('ul')

  • 删除标签

    •  //删除节点后，事件也会删除（简言之，删除了整个标签）
       $(selector).remove(); 
       ​
       // 删除节点后，事件会保留
       $(selector).detach(); 
       ​
       // 清空选中元素中的所有后代节点
       $(selector).empty(); 

  • 修改标签

    •  // selector被替换：将所有匹配的元素替换成指定的string、js对象、jquery对象。
       $(selector).replaceWith(content);
       ​
       // selector被替换：将所有的匹配的元素替换成p标签。
       $('<p>哈哈哈</p>')replaceAll(selector);
       // replaceWith 
       $('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签
       $('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素
       ​
       // replaceAll
       $('<br/><hr/><button>按钮</button>').replaceAll('h4')

  • 克隆标签

    •  $('button').click(function() {
       ​
        // 1.clone()：克隆匹配的DOM元素
        // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
         $(this).clone(true).insertAfter(this);
       })

• 属性操作

  • atter()设置属性值或者获取值

     //获取值：attr()设置一个属性值的时候 只是获取值
     $('div').attr('id')
     $('div').attr('class')
     ​
     ​
     //设置值
     $('div').attr('class','box') //设置一个值
     $('div').attr({name:'hahaha',class:'happy'}) //设置多个值

  • removeAttr()移除属性

     //删除单个属性
     $('#box').removeAttr('name');
     $('#box').removeAttr('class');
     ​
     //删除多个属性
     $('#box').removeAttr('name class');

  • prop()

     // 查看属性
     $(selector).prop(property)
     ​
     // 设置属性
     $(selector).prop(property,value)
     ​
     // 设置多个属性
     $(selector).prop({property:value, property:value,...})

• class类属性

  • addClass添加类名

     // 为每个匹配的元素添加指定的类名。
     $('div').addClass("box");//追加一个
     $('div').addClass("box box2");//追加多个

  • removeClass移除类名

     // 从所有匹配的元素中删除全部或者指定的类。
     $('div').removeClass('box')；//移除box类
     $('div').removeClass();//移除全部的类

  • toggleClass类的切换

     // 如果存在（不存在）就删除（添加）一个类。
     $('div').toggleClass('box')
     ​
     $('span').click(function(){
         //动态的切换class类名为active
         $(this).toggleClass('active')
     })

• val表单控制Value属性

  •  // 获取值：用于表单控件中获取值，比如input textarea select等等
     $(selector).val()
     ​
     // 设置值：
     $('input').val('设置了表单控件中的值')；

• css样式

   // css(直接修改css的属性来修改样式)
   $("div").css('color'); //获取
   ​
   $("p").css("color", "red"); //设置
   $("p").css({"color":"red","background-color":"yello"}); // 设置多个

• 盒子样式属性

  • 内容:宽度(width)和高度(height)

  • 内容+padding:宽度(innerWidth) 高度(innerHeight)

  • 内容+padding+border:宽度(outerWidth) 高度(outerHeight)

     // 外部宽
      .outerWidth() //获取第一个匹配元素 ：内容+padding+border的宽
      .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽
     ​
      .outerWidth(value) //设置多个，调整的是“内容”的宽
     ​
     //外部高
      .outerHeight() //第一个匹配元素：获取内容+padding+border的高
      .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高
     ​
      .outerHeight( value ) //设置多个，调整的是“内容”的高

• 滚动条距离属性

   // 水平方向
   .scrollLeft()      //获取
   .scrollLeft( value )//设置
   ​
   // 垂直方向
   .scrollTop() //获取
   .scrollTop( value ) //设置