第十一章 前端开发-jQuery

11.4.0 jQuery

11.4.1 基本知识

1. 定义： jQuery是一个快速，小巧，功能丰富的JavaScript库

2. 作用：它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单

3. jQuery使用 $ 符号，占用两个变量：$ 和 jQuery

   • $ 实际上表示的是一个函数名. jQuery本质就是一个函数

   $(); 					// 调用上面我们自定义的函数$
   // 在script中写代码前，必须进行文档加载，避免出错
   $(document）.ready(function(){}); 	// 文档加载，即调用入口函数
   // 文档加载可简写为下面格式
   $(function(){}); 		// 文档加载，即调用入口函数
   // 获取元素示例
   $('#btnShow');			// 获取id属性为btnShow的元素
   $('div');				// 获取所有的div标签元素
   

jQuery的两大特点

• 链式编程：比如.show()和.html()可以连写成.show().html()。
• 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

入口函数和window.onload()对比

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

  //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

而 jQuery的入口函数，有以下几种写法：

写法一：
 //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })
写法二：（写法一的简洁版）

 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });
写法三：

  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

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

区别一：书写个数不同：

• Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
• jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

• Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
• jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

$变量名冲突的方法 在前面写上 jQuery.noConflict();

11.4.2 js节点对象和jQuery对象的区别

1. 区别：
   • 通过 jQuery 获取的元素是一个伪数组，数组中包含着js节点对象
   • jQuery就是把js节点对象重新包装了一下，让其具有了jQuery方法
2. 相互转换：
   • js节点对象转换成jQuery对象：$(js节点对象);
   • jQuery对象转换成js节点对象：jquery对象[index]; //0.1.2.3
3. 总结：如果想要用哪种方式设置属性或方法，必须转换成该类型

11.4.3 jQuery的选择器

11.4.3.1 基本选择器

• ：id选择器

• . ：类选择器
• element：标签选择器
• *：通配符选择器
• , ：并集选择器

11.4.3.2 高级选择器

• 空格：后代选择器
• >：子代选择器
• +：紧邻选择器
• ~：兄弟选择器

11.4.3.3 属性选择器

• 与属性有关的选择器

11.4.3.4 基本过滤选择器

• :eq()：选择一个，索引从0开始
• :first：获取第一个
• :last：获取最后一个
• :odd：获取奇数
• :even：获取偶数

11.4.3.5 筛选选择器 方法

• .eq()：选择一个，索引从0开始
• .children()：获取亲儿子
• .next():获取匹配元素后面紧邻的同辈元素
• .prev(): 获取匹配元素前面紧邻的同辈元素
• .find()：获取的后代
• .parent()：获取集合中每个元素的父集元素，亲爹
• .parents():获取集合中每个元素的祖先元素
• .siblings()：获取除它之外的兄弟元素
  • siblings方法的应用

1.1.4.3.6 jQuery选择器的完善机制

如果元素不存在，js不会保存阻塞其他代码的运行

//根据元素是是否有长度判断
if($('#box').length>0){
   //do something;
   }else{
       throw new Error('获取元素失败');
   }
或者转化为DOM元素来判断
if($('#box')[0]){
   //do something;
   }else{
       throw new Error('获取元素失败'); 
   }

11.4.4 jQuery的动画

11.4.4.1 普通动画

• show()：显示动画

  // 无参数，表示让指定的元素直接显示出来
  $(selector).show();
  
  // 通过控制元素的宽高、透明度、display属性，逐渐显示
  $(selector).show(2000); 
  // slow 慢：600ms		normal 正常：400ms		fast 快：200ms
  $(selector).show("slow");
  
  // 动画执行完后，立即执行回调函数
  $(selector).show(5000, function(){});
  

• hide()：隐藏动画

  $(selector).hide();
  $(selector).hide(1000); 
  $(selector).hide("slow");
  $(selector).hide(1000, function(){});
  

• toggle()：开关式显示隐藏动画

  // 显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()
  $('#box').toggle(3000,function(){});
  

11.4.4.2 卷帘门动画

• slideDown()：滑入动画

• slideUp()：滑出动画

• slideToggle()：滑入滑出切换动画

  //1、滑入动画效果：下拉动画，显示元素
  $(selector).stop().slideDown(speed, 回调函数);  //stop先清除
  //2、滑出动画效果：上拉动画，隐藏元素
  $(selector).stop().slideUp(speed, 回调函数);。
  //3、滑入滑出切换动画效果：
  $(selector).slideToggle(speed, 回调函数);
  

11.4.4.3 淡入淡出动画

• fadeIn()：淡入动画

• fadeOut()：淡出动画

• fadeToggle()：淡入淡出切换动画

• fadeTo()：指定透明度

  //1、淡入动画效果：让元素以淡淡的进入视线的方式展示出来
  $(selector).fadeIn(speed, callback);
  //2、淡出动画效果：让元素以渐渐消失的方式隐藏起来
  $(selector).fadeOut(1000);
  //3、淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示或隐藏状态
  $(selector).fadeToggle('fast', callback);
  //4.$(selector).fadeTo(400,0.3) //（speed（毫秒级）,1-400数值来表示透明度）
  

11.4.4.4 自定义动画

• .animate({params},speed,callback)
  • 第一个参数表示：要执行动画的CSS属性 如设置高度，宽度（必选）
  • 第二个参数表示：执行动画时长（可选）
  • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）

11.4.4.5 停止动画

• $(selector).stop(true, false);
  • 第一个参数：
    • true：后续动画不执行
    • false：后续动画会执行
  • 第二个参数：
    • true：立即执行完成当前动画
    • false：立即停止当前动画
  • 注意：
    • 参数如果都不写，默认两个都是false
    • 实际工作中，直接写stop()用的多

11.4.5 jQuery常用事件

1. 常用事件示例：

   • click：鼠标单击事件 dblclick（双击不常用）

    冒泡原理，子级元素和父级元素都绑定点击事件，点击子级元素会冒泡到父级元素 需要阻止冒泡
    <div class="box">
        <h3>冒泡</h3>
    </div>
    $('.box').click(function(){
        alert(‘父点击了’);    
    })
    $('h3').click(function(event){
        //阻止冒泡
        event.stopPropagation();
        alert('子点击了')    
    })
    event.preventDefult()； 阻止默认行为，如a标签的点击跳转 与javascipt:void(0) 一样;
   

   • mousedown/mouseup:鼠标按下、抬起

   • mouseover / mouseout：鼠标移入/移出事件

   • mouseenter / mouseleave：鼠标进入/离开事件（推荐）被选中的元素才会触发

     • 同时使用时，可以用.hover(回调函数,回调函数)

   • change：文本框内容改变事件

   • select：文本框内容被选中事件

   • submit：提交事件

   • focus：光标聚焦事件

   • blur：光标失焦事件

   • keydown() keyup() :键盘事件

     $(window).keydown(function(event){
         //获取整个window窗口
         console.log('键盘按下了');
         console.log(event.keyCode); //空格:32 enter:13 esc:27
     })  
     

   ready() 文档加载事件

   scroll() 监听窗口滚动事件

2. 取消事件默认的方式：

   • javascript:void(0);
   • javascript:;
   • .preventDefault()

3. 事件委托:
   原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
   作用：
   1.性能要好
   2.针对新创建的元素，直接可以拥有事件

   事件源 :
   跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

   使用情景：
   •为DOM中的很多元素绑定相同事件；
   •为DOM中尚不存在的元素绑定事件；

   <ul>
       <li>内容太1</li>
   </ul>
   <script>
       $function(){
       // on('事件名','selector',callback)
       $('ul').on('click','li',function(){
           alert($(this).text());
       })
       //将来要做的事情
       setTimeout(function(){
           $('<li>内容太2</li>').appendTo('ul');
       },5000);
   }
   </script>
   

11.4.6 jQuery的属性操作

1. 对属性操作

   • 设置属性：attr(name,value);

   // 获取值：attr()设置一个属性值的时候 只是获取值
   var id = $('div').attr('id')
   console.log(id)
   var cla = $('div').attr('class')
   console.log(cla)
   // 设置值
   //1.设置一个值 设置div的class为box
   $('div').attr('class','box')
   //2.设置多个值，参数为对象，键值对存储
   $('div').attr({name:'hahaha',class:'happy'})
   

   • 删除属性：removeAttr(name);

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

   • prop()：设置属性

     • 当该方法用于返回属性值时，则返回第一个匹配元素的值
     • 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对

   • attr和prop的区别：

     • prop方法获取的是当前节点对象的属性，单选操作
     • attr方法获取的是标签上的属性

   • 对值操作：

   • html() 是获取和设置选中标签元素中所有的内容

     • html('') 也会清除内容

     • html() 是获取选中标签元素中所有的内容

       $('#box').html();
       

       设置值：设置该元素的所有内容 会替换掉 标签中原来的内容

       $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
       

   • text() 获取匹配元素包含的文本内容的值

   • val() 用于表单控件中获取值，比如input textarea select等等

     <input type="text" value="zz"></input>
     <script>
         //获取文本输入框的值
     	console.log($('input[type=text]').val()); //zz
     	//设置文本的内容,给input设置值，要使用value属性值的值
     	$('input[type=text]').val("zy");
     
     

     <select multiple="multiple" id ="multiple">
         <option value="a">html</option>
         <option value="b">css</option>
         <option selected="selected">javascript</option>
         <option>vue</option>
     </select>
     
     <script>
             $('#multiple').val(['html','css']) //会默认选中，数组中写两个
     </script>
     

2. 对类操作

   • 添加类：addClass()

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

   • 删除类：removeClass()

   // 移除指定的类（一个或多个）
   $('div').removeClass('box')；
   // 移除全部的类
   $('div').removeClass();
   

   • 如果存在就删除，不存在就添加：toggleClass()

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

   • 判断是否有这个类：hasClass()

11.4.7 jQuery中DOM的操作

11.4.7.1 插入操作

1. 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');
   
   $('<li>天王盖地虎</li>').appendTo($('ul')).css('color','red').click(function(){
       console.log($(this).text());  //找到文本
   })
   

2. prepend / prependTo：前置添加

   • 父元素.prepend(子元素);
     • 前置添加， 添加到父元素的第一个位置

   $('ul').prepend('<li>我是第一个</li>')
   

   • 子元素.prependTo(父元素);
     • 前置添加， 添加到父元素的第一个位置

    $('<a href="#">路飞学诚</a>').prependTo('ul')
   

3. after：在匹配的元素之后插入内容

   • 兄弟元素.after(要插入的兄弟元素);

   $('ul').after('<h4>我是一个h3标题</h4>')
   

   • 要插入的兄弟元素.insertAfter(兄弟元素);

   $('<h5>我是一个h2标题</h5>').insertAfter('ul')
   

4. before：在匹配的元素之后插入内容

   • 兄弟元素.before(要插入的兄弟元素);

   $('ul').before('<h3>我是一个h3标题</h3>')
   

   • 要插入的兄弟元素.inserBefore(兄弟元素);

   $('<h2>我是一个h2标题</h2>').insertBefore('ul')
   

11.4.7.2 修改操作

1. replaceWith：将所有匹配的元素替换成指定的string、js对象、jquery对象

   • $(selector).replaceWith(content);

   //将所有的h5标题替换为a标签
   $('h5').replaceWith('<a href="#">hello world</a>')
   //将所有h5标题标签替换成id为app的dom元素
   $('h5').replaceWith($('#app'));
   

2. replaceAll：用匹配的元素替换所有h4元素

   $('<br/><hr/><button>按钮</button>').replaceAll('h4')
   

11.4.7.3 删除操作

1. remove：删除节点后，事件也会删除（即删除了整个标签）

   • $(selector).remove();

   $('ul').remove();
   

2. detach：删除节点后，事件会保留

   • $(selector).detach();

    var $btn = $('button').detach()
    //此时按钮能追加到ul中
    $('ul').append($btn)
   

3. empty：清空选中元素中的所有后代节点

   • $(selector).empty();

   //清空掉ul中的子元素，保留ul
   $('ul').empty()
   

11.4.7.4 克隆操作

$('ul').clone(ture).appendTo('...') //要完全clone需加true参数，会复刻

11.4.8 jQuery中CSS的操作

http://book.luffycity.com/python-book/jquery/946-jquerywei-zhi-xin-xi-dui-xiang-de-cao-zuo.html

对样式操作

• 通过调用.css()方法，进行对样式的操作

  • 如果传入一个参数，看一下这个参数如果是一个字符串表示获取值，如果是对象，表示设置多少属性值

  • 如果是两个参数，设置单个属性值

    • $('#box').css({
       color:'red';
       fontSize:20;
       })
      

• .offset() 获取当前窗口的相对偏移，是一个对象，里面保存top和left属性

• scrollTop():获取元素滚动条距离顶部的距离

• scrollLeft():获取元素滚动条距离左的距离

• width()/height():获取和设置高度、宽度

  • console.log($('#box').width()); //获取的是数值 可后续做计算盒子操作

• innerWidth()/innerHeight():获取匹配元素内部区域宽度（包括补白，不包括边框）

• outerWidth()/outerHeight():获取匹配元素外部宽度（默认包括补白和边框）

11.4.9 jQuery的ajax

1. 定义：

   • AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

   • 在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行局部显示

   • $.ajax({
         url:'',
         method:'get',
         sucess:function(res){
             ....
         }
     })
     

2. 方式：

   • get
   • post

11.5.0 jQuery的插件

• 网址

  https://www.jq22.com