6000字带你浏览JQuery

JQuery光速入门

JQuery特性：隐式迭代，链式编程

JQuery不能使用箭头函数

JQuery的使用

<script src="jquery-3.6.0.min.js"></script>
<script>
    // JQuery的使用
     $(function(){
         $('选择器').函数(function(){
             
         })
     })
</script>

JQuery选择器

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
类选择器	$(“.class”)	获取同一类的class元素
标签选择器	$(“div”)	获取同一类的所有元素
并集选择器	$(“div,p,li”)	使用逗号隔开，只要符合条件之一就可以
交集选择器	$(“div.redClass”)	获取class为redClass的div元素
子代选择器	$(“ul-li”)	使用-获取儿子层级的元素，注意并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子
:eq (index)	$(“li:eq(2)”).css(‘color’:“red”)	获取到的li标签，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”).css(‘color’:“red”)	获取到的li标签，选择索引号为奇数的元素
:even	$(“li:even”).css(‘color’:“red”)	获取到的li标签，选择索引号为偶数的元素

JQuery筛选选择器(方法)

名称	用法	描述
children(select)	$(‘ul’).children(‘li’)	相当于$(“ul>li”)子代选择器
find(select)	$(‘ul’).find(‘li’)	相当于$(“ul li”)后代选择器
siblings(select)	$(#firstl’).siblings(“li”)	查找兄弟节点,不包括自己本身
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev	$(“li”).prev()	找上一个兄弟
prevAll	$(“li”).prevAll()	找之前的所有兄弟

JQuery常见函数

text()：获取/设置文本

​ _{会获取到这个标签多有的文本，包括后代元素的文本}

css()：设置/获取样式,操作style属性

获取 $('选择器').css("样式名")
设置 $('选择器').css("样式名","样式值")
设置多样式
 $('选择器').css({
 	"样式名","样式值"
 })

show()/hide()：显示或隐藏盒子

 $(function(){
     //这里的this是$(".warp>ul>li")调用的所以指向它
        $(".warp>ul>li").mouseover(function(){
            $(this).children('ul').show();
        })
        $(".warp>ul>li").mouseout(function(){
            $(this).children('ul').hide();
        })
    })

鼠标事件

函数名	作用
click()	单击事件
dbclick()	双击事件
mousedown()	鼠标按下事件
mouseup()	鼠标弹起事件
mouseover()	鼠标移入
mouseout()	鼠标移出
mousemove()	鼠标移动事件
mouseenter()	鼠标进入
mouseleave()	鼠标移出

addClass(“类名 类名”): 添加类

​ _{可以添加多个类使用空格隔开}

removeClass(“类名 类名”)：移除类

​ _{可以移除多个类使用空格隔开}不填写参数会将该选择器上所有类名移除

hasClass(“类名”)：判断类

​ _{判断一个元素有没有某个元素，如果有就返回true,没有返回false}

toggleClass(“类名”)：切换类

​ _{如果元素有某个类就移除这个类，如果元素没有这类就添加这个类}

JQuery动画

基本动画

• 显示show() / 隐藏hide() / 切换 toggle()
• 滑入slideDown() / 滑出slideUp() / 切换 slideToggle()
• 淡入fadeIn () / 淡出fadeOut() / 切换fadeToggle()

$('选择器').show([speen],[callback])
参数1：代表执行动画的时长 单位毫秒 也可以是代表时长的字符串 fast(200毫秒) normal(400毫秒) slow(600毫秒) 如果参数单词写错就相当写了一个normal
参数2:代表动画执行完毕后的回调函数
其他函数参数同理

自定义动画

• animate 自定义动画

$(selector).animate({parmas},[speed],[easing],[callback])
{parmas}：要执行动画的css属性，带数字 必选 参数类型是对象
[speed]: 执行动画的时长  参数类型是数值
[easing]: 执行动画效果 默认为swing(缓动) 可以是linear(匀速) 参数类型是字符串
[callback]: 动画执行完后的回调函数

停止动画

• stop() 停止动画

  参数1:是否清除队列
  参数2:是否跳转到最终效果
  如果不写参数 默认就是两个false
  

JQuery节点操作

创造节点

• html() 获取及设置内容

  • 获取内容:html方法不给参数 获取到元素所有内容
  • 设置内容:html方法给参数(参数类型字符串)
    设置的内容会把原来的内容覆盖
    如果设置的内容包含标签，是会把标签给解析出来

• $()

  • 创造节点

    var 变量 = $('标签')
    

  • 将创建的节点添加到节点上

    $('select').apped(变量)
    

添加节点的方式

1. append() 父元素添加子元素 且添加的元素为最后一个子元素添加

   $("father").append('childer元素')
   e.g
   $("p").append(" <b>Hello world!</b>");
   

2. prepend() 父元素添加子元素 且添加的元素为第一个子元素添加

   如上 不过添加的子元素为父节点的第一个元素
   

3. before() 元素A.before(元素B) 把元素B插入到元素A的【前面】去，作为兄弟元素添加

   $("selectA").before('selectB');
   e.g
   $("p").before("<p>我在我兄弟的前面</p>");
   

4. after() 元素A.afer(元素B) 把元素B插入到元素A的【后面】去，作为兄弟元素添加

   类上
   

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

   //效果和第一个一样 不过顺序是反的
   $("childer").appendTo(''father"")
   

移除节点

1. 父元素.html(“”) 删除当前选中的元素下的所有子元素,不包含自身
   不推荐会造成内存泄露

   $("father").html('')
   

2.empty() 删除当前选中的元素下的所有子元素,不包含自身

//选择器 节点移除 
$("select").empty()  

3. 节点.remove() 删除当前选中的元素及其所有子元素,包含自身

   $("select").remove() 
   

克隆节点

• clone() $('select').clone() 将其存放到变量中，节点添加变量

  var   variable = $('select').clone();
  $('select').append(variable)
  

val()获取即设置表单元素的值

无参是获取，传参是设置值

JQuery 操作属性

设置属性

//设置单个属性
$('select').attr('属性','属性值')
//设置多个属性
$('select').attr({
    '属性1':'属性值1',
    '属性2':'属性值2',
})

$('select').attr('属性','属性值')如果有这个属性,则更改这个属性，没有则添加这个属性

获取属性

$('select').attr('属性') 

移除属性

//移除单个属性
$('select').removeAttr('属性')
//移除多个属性
$('select').removeAttr('属性1空格属性2空格属性3' )

prop操作

• 在JQuery1.6之后，对于checked,selected,disabled这类的属性,不能使用attr方法，只能用prop方法

//获取属性
$('select').prop('属性')
//设置属性
$('select').prop('属性','属性值')

JQuery尺寸和位置操作

• width方法和height方法 设置或获取高度，不包括内边距，边框和外边距

//带参数表示设置高度，
$('select').height(200)
//不带参数获取高度
$('img').height();

//获取网页的可视宽度
$(window).width();
//获取网页的可视高度
$(window).height();

//方法返回元素的宽高(包括内边距)
innerWidth()/innerHeight()
//方法返回元素的宽度/高度(包括内边距和边框)
outerWidth()/outerHeight()

//方法返回元素的宽度/高度(包括内边距,边框和边框)
outerWidth(true)/outerHeight(true)

• offset 方法和position方法

  • offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParenyt)的位置

    //获取元素距离document的位置，返回值为对象:{left:0,top:0}
    $(selector).offset()
    
    //获取相对于其最近的有定位的父元素的位置
    $(selector).position();
    

scrollTop 与scrollLeft

• 设置或获取垂直滚动条的位置

  //表示元素内容被卷曲出去的高度
  $(window).scrollTop();
  //表示元素内容被卷曲出去的宽度
  $(window).scrollLeft();
  
  //设置往里面传参
  

JQuery事件机制

• JQuery对JS事件进行了封装，增加并扩展了事件处理机制，JQuery不仅提供了更加优雅的事件处理语法，而且极大的增加了事件的处理能力

JQuery注册事件的发展历程

==同时注册：==即能同时注册多个事件 不能同时注册即一个选择器执行一个函数

//同时注册 一个选择器注册多个函数
$('div').bind({
	mouseenter:function(){
		console.log("鼠标移入事件");
	},
	click:function(){
		console.log('鼠标单击事件');
	}
})
//不能同时注册 即一个选择器对应注册一个函数
$('selector').mouseenter(function(){
            console.log('鼠标移入事件');
})
$('selector').click(function(){
            console.log('鼠标单击事件');
})

动态注册：即后面创建了标签，新建的标签也具有相应的事件 不支持动态注册即后面在页面中创建了标签，不会注册相应事件，不具有相应的事件

1. 简单事件绑定 不支持同时注册 也不支持动态注册

2. bind方式注册事件 支持同时注册,不支持动态注册

3. delegate注册委托事件 支持同时注册 支持动态注册 原理是事件冒泡

   //注意是父元素执行delegate注册事件 ,第一个参数是目标选择器，第二个参数是事件注册
   $('fatherSelector').delegate('selector',{
   	mouseenter:function(){
   		console.log("鼠标移入事件");
   	},
   	click:function(){
   		console.log('鼠标单击事件');
   	}
   })
   

on注册事件

JQuery1.7之后 JQuery用on统一了所有事件的处理方法

// on注册简单事件 
// 表示给选择器绑定事件,并由自己触发,不支持动态绑定
$(selector).on('click',function(){}); 

//on注册事件委托 支持动态绑定
//选择器父节点 第一个参数为事件名称 第二个参数为选择器 第三个为执行函数 原理是冒泡
$(fatherSelector).on('click','selector',function(){}); 

off解绑事件

//off()不给参数解绑所有的事件，off('click')给参数解绑指定的事件
$(selector).off();

触发事件

$(selector).click(); //触发click事件
$(selector).trigger('click');

JQuery事件对象

什么是事件对象：注册一个事件，系统就会帮我们生成一个对象记录这个事件触发的一些信息

$(selector).on('click',function(e){
	console.log(e);
})

JQuery事件对象是JS事件对象的一个封装，处理了兼容性。

/*
	screenX和ScreenY 对应屏幕最左上角的与你触发事件点击的坐标值的 宽高
	clientX和clientY     距离页面可视区域(忽视滚动条)与你触发事件点击的坐标值的宽高
	pageX和pageY      距离页面最顶部的左上角的位置与你触发事件点击的坐标值的宽高(会计算滚动条的距离)
	
	event.stopPropagation()  阻止事件冒泡行为
	event.preventDefault()	阻止浏览器默认行为
	return false		     即能阻止事件冒泡，又能阻止浏览器默认行为
*/
e.g
$(selector).on('click',function(e){
	e.screenX();
	e.stopPropagation()
})

JQuery 补充知识点

链式编程

• 通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回获取到的相应的值，无法返回JQuery对象

  end(); //回到上一个JQuery对象
  

each方法

• JQuery的隐式迭代会对所有DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候就需要自己进行迭代。

• 作用:遍历JQuery对象集合，为每一个匹配元素执行一个函数

  //参数一表示当前元素在所有匹配元素中的索引号
  //参数二表示当前元素(DOM对象)
  $(selector).each(function(index,element){})
  e.g 给每个li标签设置不同的透明度
   $('li').each(function(index){
            $(this).css('opacity',index/10)
        })