jQuery

1.简介

• jquery 核心函数

  <!--
  1. 作为一般函数调用: $(param)
    1). 参数为函数 : 当DOM加载完成后，执行此回调函数
    2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    3). 参数为DOM对象: 将dom对象封装成jQuery对象
    4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
  2. 作为对象使用: $.xxx()
    1). $.each() : 隐式遍历数组
    2). $.trim() : 去除两端的空格
  -->
  
  <!--/*-->
  <!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框-->
  <!--需求2. 遍历输出数组中所有元素值-->
  <!--需求3. 去掉"  my atguigu  "两端的空格-->
  <!--*/-->
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  <script type="text/javascript">
  //    <!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框-->
  //  1.  参数为函数    则约等于页面加载完成（window.onload）的回调函数
    $(function () {
  //  2.  参数为选择器字符串  通过选择器去匹配的元素封装成jquery对象返回
      $('#btn').click(function () {
  //  3.  参数为dom对象  将当前的dom对象转换成jquery对象返回
          alert($(this).html());
  //  4.  参数为html标签字符串  将当前这个标签创建 并且直接为jquery对象
          $('<input type="text" name="msg3"/><br/>').appendTo('div');
      })
  //      <!--需求2. 遍历输出数组中所有元素值-->
        var arr = [4,7,3,1,6];
  //    回调函数中  第一个参数对应索引  第二个参数对应当前元素的值
        $.each(arr,function (index,item) {
          console.log(index,item);
        });
  //      <!--需求3. 去掉"  my atguigu  "两端的空格-->
        var str = '  my atguigu  ';
  //      console.log(str.trim())
        console.log($.trim(str))
  
    })
  

2.jquery使用

2.1 dom对象和jquery对象

<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			
		})
	</script>

jquery和原生入口函数的区别

$是一个函数

DOM&jquery对象

• DOM对象及时原生的js获取的对象

• jquery 利用jquery对象选择器获取的对象

DOM对象和jquery对象对互相转换

$(function(){
			let one=document.getElementsByClassName('one');
			let $one=$(one);
		})


------------------dom 转jquery---------------------
    
    //通过下标来转
    let $div=$('div');
				
	let div=$div[0];

    //通过jquery的get方法来抓换
	let $div=$('div');
    let div=$div.get(1);

2.2 text方法

• 获取文本

  $(‘#one’).text();

  //里面给参数就是获取文本
  

• $(‘div’).text();

  包含多个dom对象的 获取到的是多个dom对象的文本

• 设置文本

  $(‘#one’).text(‘新的设置的文本’);

• $(‘div’).text();

2.3 css方法

• 获取样式

  $(‘#one’).css(‘样式名称’);

  $(‘div’).css(‘width’);

• 设置样式

  $(‘#one’).css(‘样式’，属性值)；如果带单位 px 需要加引号 如果是单纯的数值就不需要加引号

• 设置多样式

  $(‘#one’).css({

  样式名称：样式值，

  样式名称2；样式值2，…

  });

• 给一组DOM设置样式 这种会隐式遍历 会把每一个元素都遍历出来

  $('div').css({
  	样式名称：样式值，
  	样式名称1:样式值2,.......
  });
  

2.4 选择器

后代选择器

父>子元素 ：获取父元素的子元素 不会获取父亲元素

父 后代元素：获取父元素的所有的后代元素

2.5 父代 兄弟 后代选择

• ,parent();返回的是元素的父亲元素

• .parents();返回元素的祖先元素 返回的是该元素的 所有对祖先元素 一直到html

  ---

• children();返回的是该元素的所有的之间子元素

• find(); 返回的是被选元素的后代元素 一直到最后一个后代元素

  $('div').find('span');
  //返回的是div的后代的所有的span元素
  

• siblings() 方法返回被选元素的所有同胞元素

• next（） 返回的是被选元素的下一个同胞元素

• nextAll() 返回的是所有的后面的同胞元素

• nextUntil() 返回的是两个参数之间的同胞元素

  $('h2').nextUntil('h5');
  //返回的是h2-h5之间的所有同胞元素
  

  ---

• first() 返回的是被选元素的第一个元素

  $('div p').first();
  //返回的是div元素中的第一个p
  

• last（） 返回的是被选元素的最后一个元素

  $("div p").last();
  //返回的是div元素中的最后一个p
  

• eq() 返回的是 带有指定索引的元素

  $("div").eq(1);
  //返回的是第一个div
  

• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

  $(document).ready(function(){
    $("p").filter(".url");
  });
  //返回带有类名 "url" 的所有 <p> 元素：
  

• not 法返回不匹配标准的所有元素、

  $("div").not('.url');
  返回的是div中所有的不带url的元素
  

2.6 class类的操作

-----------------------------------添加和移除类的操作----------------------------------------

• addClass(‘类名称’) 给元素添加类

• addclass(‘l类1 类2’) 给元素添加多个类

• removeClass(); 不写参数就是移除所有的类

• removeClass(‘类名称’) 移除元素的类

• removeClass(‘类名称1 类名称2’) 移除元素的多个类

  $('#one').removeClass();
  //移除one 的所有的类
  

-------------------------------------判断类的操作–--------------------------------------------

• hasClass(‘类名称’) 判断类 判断一个元素有没有某个类 如果有就返回true 反正返回false

  $('#one').hasClass('one');
  //判断one里面有没有one这个类
  

-------------------------------------切换类的操作–--------------------------------------------

• toggleClass(‘类名称’) 切换类

  $('#one').toggleClass('ddd');
  //把one的类切换为ddd   
  

2.7 jquery 动画

• 显示与隐藏

  show();如果没有参数就没有动画效果

  show(时长，回调函数)；时长可以是毫秒数 也可以是其他的参数

  $('div').show(2000,function(){
  	alert('哈哈哈');
  })
  

  hide()隐藏 没有参数就是没有动画效果 就直接消失了

  hide（时长，回调函数）; 效果是和show一样的

  toggle（）切换 ；切换动画的显示和隐藏两种状态

  ---

• 滑入与滑出

  slideDown（） 没有参数的话就是默认的相当于给了一个默认的时长2s

  slideDown（时长，回调函数）；

  $('div').slideDown(200,function(){
  	alert('hahhah');
  })
  

  slideUp（） 滑出 默认效果

  slideUp（时长，回调函数）；

  slideToggle（） 切换

  ---

• 淡入与淡出（改的是透明度）

  fadeIn（）；默认效果

  fadeIn（时长，回调函数）；

  fadeOut （）；淡出默认淡出效果

  fadeOut（时长，回调函数）；

  fadeToggle（） 淡出淡出的切换

  fadeTo（时长，0-1的数字）；淡入到哪里 后面那个参数改的是透明度

  ---

• 自定义动画

  animate（要改变的属性，时长，linear/swing，回调函数）；

  参数1 ：必选的属性 是需要改变的值

  参数2：执行动画的时长

  参数3：代表的是匀速还是缓动 默认是缓动

  $('div').animate({
  width:100,
  height:100,
  left:100,
  top:100
  },200,linear,function(){
  //最后有一个回调函数意味着我们可以继续无线套娃
  $('div').animate({
  	windth:200,
  	height:300
  }200,swing,function(){});
  });
  

• 动画队列与停止队列

  动画队列 就是一组连续的动画

  $('div').slideDown(2000).slideUp(2000);
  //滑入用2000毫秒随后使用2000毫秒的时间来滑出
  

  停止动画

  stop（true/false , true/false）;

  参数1：是否清除队列 （动画执行到一半了 点击停止 是否还继续执行未完成的动画）

  参数2：是否跳到最终的效果（动画执行到一半了 点击停止 是否直接跳到动画的最终效果）

  $('div').stop(true,false).slideDown(200);
  //div的第一个动画还没执行完的时候 下一个动画就来了就会产生动画的队列
  然后进行设置 让动画队列继续存在 但是当前的动画不执行完 马上执行下一个动画
  

2.8 jquery节点

• html方法：设置或者获取内容

  html（） 不给参数就是获取内容 获取的是元素的所有的内容

  html（参数）;设置的内容会替换掉原来的内容 、

  ​ 如果设置的内容中包含标签 会把标签里面的内容解析出来

  $('div').html('我是设置的内容');
  $('div').html('我是设置的内容<a hrtf="www.baidu.com">百度<a>');
  //下面的这个会把设置的里面的标签解析出来
  

• $(参数);能够创建元素 但是创建的元素是单独的 需要追加到节点中

  let aLink=$('<a href="www.baidu.com">百度<a>');
  //创建元素
  $('div').append(aLink);
  //把创建的a元素追加到div中
  

2.9 添加节点

1. append(对象);

   父元素.append(子元素)；把子元素作为最后一个元素添加

   $ul=$('ul');
   $li3=$('#li3');
   $ul.append('li3');
   //假设ul里面有五个元素 上面的方法会把li3剪切到最后面去 小技巧
   

   把ul中的li3 剪切到ul2的最后一个位置上面

   //获取ul中的li3
   $ul2.append($li3);
   //完成剪切
   

2. prepend（）；

   父元素.prepend(子元素)；把子元素添加到父元素所有的子元素的第一个的位置上

   剪切 同append（）方法

   ---

3. before（）；作为兄弟元素添加

   元素A.before(元素B)；A和B是兄弟元素 B元素会添加到A元素的前面

4. after（）；

   A.after(B);B元素会添加到A元素的后面

   ---

5. appendTo（）；

   子元素.appendTo(父元素); 子元素会添加到父元素中去 作为最后一个子元素添加

2.10 移除元素

1. empty();清空

   父元素.empty();清空父元素中的内容 同时也会移除元素的事件

2. remove（）； 清除掉素元素

   元素.remove(); 自杀 自己清楚掉自己

   $li.parent().remove();
   //子元素清除掉父元素
   

2.11 克隆节点

• clone();

  元素.clone();克隆的节点只会存在在内存中 还需要把节点添加到页面中 克隆出来的元素和原来的元素的所有的属性都是一样的

  clone(true/false); 参数是TRUE 就会把事件也一起克隆 如果是FALSE就不会

2.12 设置获取表单元素的值

• val（）；不给参数就是获取

  val（‘值’）；给的参数就是设置的值

3.jquery 属性操作

3.1设置属性

• attr();

  元素.attr(‘属性’，‘属性值’)；修改属性值

  元素.attr(‘自定义属性’，‘自定义属性值’)；修改自定义属性值

  元素.attr(‘自定义属性’，‘自定义属性值’); 修改自定义属性值

​ 元素.attr({

​ 属性名1：属性值1，

​ 属性名2：属性值2，

​ 属性值3，属性值3.。。。。。。。。

​ })

3.2 获取属性

元素.attr(‘属性名’)；

$("div").attr('height');
获取div的高度

3.3 移除属性

元素.removeAttr(‘属性名’)；移除单个属性

元素.removeAttr(‘属性名1 属性名2 属性名3.。。。。’)

3.4 操作布尔类型

元素。prop（）；获取属性的布尔值 例如checkde的值 TRUE或者flase

3.4尺寸和位置的操作（height 和width）

元素.width（）； 获取元素的宽度 不包括内边距 外边距 和边框

元素.height（）;获取元素的高度 不包括内边距 外边距 和边框

元素.width(数值)；设置元素的宽 不包括 内外边距和边框

元素.heigth(数值);设置元素的高 不包括 内外边距和边框

含有padding的获取方式

元素.innerHeight/ innerWidth ();

含有内边距 和边框 的获取方式

元素.outerWidth() / outerHeingt() ；

含有内外边距 和边框的获取方式

元素.outerWidth( true )/outerHeight(true ) 需要在参数里面加上TRUE

3.5 获取页面可视区宽度和高度

window.height();

window.width();

3.6 元素的位置（相对于视口的位置 or 相对于元素父元素的位置）

元素.offset();元素相对于document的位置 获取会得到一个对象 对象里面包含了top 和 left的值

元素.position();元素相对于父元素的位置 获取会得到一个对象 对象里面包含了

3.7 设置或者获取滚动条的位置

元素.scrollTop 与 scrollLeft 获取的是元素被卷曲进 进度条的值 ( 一个div 200200 的宽高 里面放了一个400400的元素 形成了滚动条 被卷曲的部分为200*200)

元素.scrollLeft(数值) 元素.scroolTop(数值) 设置元素被卷曲进去的宽高

window.scrollLeft() window.scrollTOP 获取页面被卷曲的高度和宽度

加上数值 了以后就是设置

4 jquery 事件

4.1 事件注册（了解）

bind 支持同时注册 但是不支持动态注册

• 同时注册 就是指能够同时注册多个事件 比如可以给一个对象同时注册鼠标移入和点击事件
• 动态注册 就是如果给ID为one 的div这个元素注册了事件 如果在重建一个id为one的div 那么这个新的div就不享受前面那个div所注册的事件

bind

$('div').bind({
	mouseenter:function(){
		alerta('sddsfa');
	}，
    cleck：function(){
    	alert('发生的事件');
}
})

delegate 注册委托事件

父元素.delegate(‘要绑定的元素’,‘事件类型’，事件处理函数)

为ul下面的所有的li注册点击事件
$('ul').delegate('li','click',function(){
	alert('我是li的点击事件');
})

4.2 事件注册（重点）

• on 简单注册

元素.on(‘事件名’，‘事件函数’)；

$('div').on('click',function(){
	alert('点击事件');
})

• on 委托注册

父元素.on(‘事件名’，‘事件对象’，事件函数)；

$('ul').on('click','li',function(){
	alert('我是li上面的点击事件');
})

4.3 事件的解绑

元素.off() 不给参数就是解绑所有的事件

元素.off(‘事件’) 给了参数就是解绑对应的事件

$('button').off('click');
//解除button上的click事件

4.4 触发器

元素.trigger(‘事件名称’);

//给button 自定义一个事件
$('button').on('haha',function(){
	alert("自定义的haha事件");
});
//这个haha事件在一般情况下没有办法触发 因为它没有触发的条件
$('#button2').on('click',function(){
	let res=confirm("选择是否");
	//弹框
	
	if(res){
		$('div').tigger('haha');
	}
})

4.5 事件对象

jquery 事件对象的写法

$('button').on('click',function(e){
	
})
//在jquery中使用事件对象e来获取

事件对象常用的三个距离

• screenX or screenY ：屏幕左上角距离你触发事件的那个位置的距离的值

• clientX or clientY：可视区左上角 距离你触发事件的位置的距离的字值

• pageX or pageY： 页面左上角 距离你触发事件位置的距离的值

阻止事件对象冒泡

e.stopPropagation();组织事件冒泡

阻止浏览器的默认行为

e.preventDefault();

return false------既能阻止对象冒泡 也能阻止默认行为

获取按键

e.keyCode();

5.链式编程

返回的对象是jquery对象 如果返回的不是jquery对象 那么我们就没有必要在继续点击下去了

$('div').height(100).width(100).css('backgroundColor',red);

5.1 end

元素.end();

$('li').parent().parent();
//li的父元素是ul ul的父元素是div
$('li').parent().end().parent();
//li 的父元素是ul .end 就是还是返回li 然后在parent（） 就是还是li.parent();

5.2 显示迭代 each（）

$（'li'）.each(function(index,element){
	//把DOM对象转换成为jquery对象 然后可以调用	
	$('element').css('color','red');
})

6.多库共存

$.fn.jquery;
//这行代码能够查看jquery的版本

后面引入的会把前面引入的jquery版本给覆盖掉 使用noConflict（）

$.noConflict();
//这行代码可以把$ 符号的控制权给释放掉 还有jquery 的版本没有被释放

7.jquery 插件

7.1 插件调用方法

• 引入jquery文件
• 引入插件文件
• 调用插件方法

7.2 UI插件

自己开发插件的知识需要补充