jQuery学习归纳总结

jQuery学习归纳总结

常用版本:jQuery-1.12.4.js(未压缩) jQuery-1.12.4.min.js(已压缩)

//	引入jQuery
<script src = 'jQuery-1.12.4.js'></script>

一.jQuery与DOM

1.DOM与jQuery相比:

(1)获取元素名字太长
(2)代码冗余(for)
(3)onclick注册事件存在覆盖问题,addEventListener()注册事件不存在覆盖问题,但有兼容性问题
(4)没有动画效果,如果需要,就必须手动封装

2.dom对象与jQuery对象的转换

dom对象和jQuery对象不能混用,转换
(1)dom对象转成jQuery对象

$(dom对象)

(2)jQuery对象转成dom对象
① 通过中括号[]
② get()方法

3.this的使用

this是个dom对象,所以this要使用jQuery的方法,一定要先转成jQuery对象 $(this)

二.$符号

$的来源:jQuery
类型:函数
作用:根据参数的不同,作用不同
1.选择器:可以获取元素 $(‘div’)
2.函数:入口函数的作用 $(function(){})
3.dom对象:将dom对象转成jQuery对象 $(document)
4.HTML字符串:创建节点 $(‘HTML字符串’)

多库共存:jQuery释放$符号的控制权

// 释放$符号,并且把$符号的能力给C
var c = $.noConflict();

三.选择器

1.CSS选择器(将js中的选择器放入jQuery的$里面)

(1)id选择器 $(’#ZhangSan’)
(2)标签选择器 $(‘li’)
(3)类选择器 $(’.rendering’)
(4)并集选择器 $(’.xiaoming, #ZhangSan’)
(5)交集选择器 $(’.xiaoming.handsome’)
(6)子代选择器 $(’.xiaoming>ol>li’)
(7)后代选择器 $(‘xiaoming li’)

2.过滤选择器

(1):odd 从获取到的元素中过滤出下标为奇数的元素
(2):even 从获取到的元素中过滤出下标为偶数的元素
(3):first 从获取到的元素中过滤出第一个元素
(4):lase 从获取到的元素中过滤出最后一个元素
(5):eq 从获取到的元素中过滤出指定下标的元素

$('li:odd')
$('li:even')
$('li:first')
$('li:last')
$('li:eq(4)')		// 获取到里li里面的第5个元素

3.筛选选择器

(1)children()
jq提供的children()方法,可以获取元素内的所有子元素,支持传参,参数为选择器,可以根据选择器筛选出指定的子元素

$(this).children('ul').show();
$(this).chileren('ul').hide();

(2)find() 找后代元素

$(this).find('li')

(3)sibilings() 获取当前元素的所有兄弟元素,不包含自己

// 排他,突出等
$(this).css('opacity', 1);
$(this).sibings().css('opacity', 5);
// 简化上面俩行代码,链式编程
$(this).css('opacity', 1).sibings().css('opacity', 5)

(4)next()和nextAll()
下一个兄弟元素和后面所有兄弟元素
(5)prev()和prevAll()
上一个兄弟元素和前面所有兄弟元素
(6)parent() 查找父元素
(7)eq() 查找指定下标元素

// 获取li的第三个元素
$('li').eq(2);	// 相当于$('li:eq(2)');

四.样式操作和属性操作

1.css()操作

(1)获取样式

css(name)	// 只能获取第一个

(2)设置样式
① css(name, value):
参数:name:样式名 value:样式值
② css(obj)
参数:包含多个样式的对象

// 给li标签设置样式
$('li').css('fontSize', '50px');
$('li').css('color':'red', 'fontSize':'50px');

2.class操作

添加类选择器:addClass()
移除类选择器:removeClass()
判断是否有该选择器:hasClass()
切换类名(有就移除,没有就添加):toggleClass()

3.属性attr操作

获取属性:attr(name)
设置单个属性:attr(name, value)
设置多个属性(参数为对象):attr(obj)
移除属性:removeAttr(name)

$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr({attribute:value, attribute:value ...})

prop方法和attr方法
① 对于表单元素的checked,selected,disable属性,使用prop操作
② 除了表单元素的三个属性使用prop方法外,其它都可以使用attr方法
③ 对于自定义属性,使用attr方法(abc, index)
④ 对固有属性,使用prop方法(title, id, style, checkd, selected, disable)

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>全选案例</title>
  <style>
      <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    tbody tr {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            全选<input type="checkbox" id="j_cbAll" />
          </th>
          <th>课程</th>
          <th>老师</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>吃西瓜</td>
          <td>张三</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>吃西瓜</td>
          <td>老王</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>烤番薯</td>
          <td>田鸡</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>煎鸡蛋</td>
          <td>小鸡炖蘑菇</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {

      $("#j_cbAll").click(function () {
        //修改下面的哪些checkbox
        $("#j_tb input").prop("checked", $(this).prop("checked"));
      });

      $("#j_tb input").click(function () {

        if ($("#j_tb input:checked").length == $("#j_tb input").length) {
          $("#j_cbAll").prop("checked", true)
        } else {
          $("#j_cbAll").prop("checked", false)
        }
      });
    });
  </script>
</body>
</html>

4.jQuery的特殊属性操作

(1)val方法
作用:用于设置和获取表单元素的值

$('input').val('蚕丝被');	// 设置input标签的内容为蚕丝被

(2)html方法和text方法
html同js中的innerHTML
text()同js中的innertext

$('#box').html('<h1>这是新的内容</h1>')

(3)获取宽高:width()方法和height()方法
获取:KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲box').width() 设…(’#box’).width(500);

innerWidth => width+padding

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

outerWidth => width+padding+border
outerWidth方法的参数用于决定是否获取margin部分的值
默认值为false

$('#box').outerWidth(true);

可视区的宽高

$(window).width()

(4)获取页面的卷曲距离
scrollTop() scrollLeft()

$(window).scrollTop();
// 原生js:
window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

小火箭回到顶部:

$('html, body').animate({scrollTop:0}, 1000)

(5)位置信息:offset方法和position方法
offset方法:获取元素到页面之间的距离
返回的是个对象{top=xx, left=yy}

position方法:获取元素到有定位的父元素之间的距离(即js中offsetLeft,offsetTop相对于offfsetParent)

$('.son').position();

五.节点操作

1.添加节点

在元素里面添加节点的方法:append() appendTo() prepend() prependTo()
(1)append()
语法:parent.append(child);
作用:把children添加到parent里面,在最后面

$('div').append($('.outerP'))

(2)appendTo()
语法:children.appendTo(parent);
作用:把children添加到parent里面,在最后面

$('.outerP').appendTo('div')
// 在每个 <p> 元素的结尾插入 <span> 元素
$("<b>Hello World!</b>").appendTo("p");	

(3)prepend()
语法:parent.prepend(child);
作用:把children添加到parent里面,在最前面

$('div').prepend($('.outerP'))

(4)prependTo()
语法:children.prependTo(parent);
作用:把children添加到parent里面,在最后面

$('.outerP').prependTo('div')
// 在每个 <p> 元素的开头插入 <span> 元素
$("<span>Hello World!</span>").prependTo("p");

在元素前面后面添加节点的方法:append() appendTo() prepend() prependTo()
(5)after()和before()
A.after(B); 把B放在A前面
A.before(B); 把B放在A前面

$('div').after($($('div p')));
$('div').before($($('div p')));

2.清除节点

empty()

$('div').empty()

3.删除节点

remove()

$('div').remove();

4.克隆节点

语法:$(selector).clone(true|false)
默认为深拷贝(拷贝元素里面的内容)
参数表示是否克隆元素的事件,默认不拷贝事件
参数为布尔类型值

var $P = $('.outerP').clone(true);
$('div').append($P);

六.动画

1.show系列动画

show(展示) hide(隐藏) toggle(切换)
(1)show(speed, easing, callback)
参数:
① speed:动画时长,单位ms
默认字符串:‘fast’ :200;‘normal’:400;‘slow’:600
② easing:动画效果,swing(秋千,钟摆=>慢快慢)
默认:swing,另提供linear匀速
③ callback:当动画执行结束后执行的回调函数,可选的

$('button').click(function(){
	$('div').show(2000, functionn(){
		$('div').css('background', 'yellow')
	});
})

2.slide系列动画

slideDown(展示) slideUp(隐藏) slideToggle(切换)

slideXXX(speed, easing, callback)
slide系列动画的使用和show系列一样
注:slide系列没有参数,是有动画效果的

$('button').eq(0).click(function(){
	$('div').slideDown(2000, function(){
		console.log('slideDown结束了');
	});
})

3.fade系列动画

fadeIn(展示) fadeOut(隐藏) fadeToggle(切换)

fadeXX(speed, easing, callback)
fade系列动画的使用和show系列一样
注:fade系列没有参数时,是有动画效果的

4.animate(obj, speed, easing, callback)及stop

(1)animate(obj, speed, easing, callback)
参数:obj是个对象,对象里面写动画的样式和样式值
obj为必须要写的参数
speed,easing(swing/linear),callback都是可选的

$('button').click(function(){
	$('div').animate(
		{left:800},		// 向左移动800
		100,			// speed:动画时常
		functiion(){
			console.log('到达了终点');
		}
	)
})

动画队列(一个个执行):

$('div')
	.animate({left:800},1000)
	.animate({top:200},1000)
	.animate({borderRadius:'50%'},1000)
	.slideUp(1000)
	.slideDown(1000)

(2)stop(clearQueue, jumpToEnd)
参数:都是可选的,默认值为false
clearQueue是否清除元素的动画队列,true表示清除
jumpToEnd是否跳转到当前正在执行的动画的最终效果,true表示跳转

$('button').eq(0).click(function(){
	$('div').stop();
})

七.事件

jQuery事件:简单事件,bind, delegate, on(type, selector, data, fn) 及off解绑

1.注册事件:简单事件

$('div').click(function(){})

jQuery给元素注册同一事件多次,不存在覆盖问题

$('div').click(function(){console.log('click')}).mouseenter(){console.log('mouseenter')}

2.bind事件:bind(type, data, fn)
事件类型参数,用空格隔开多个事件名,表示给元素同时注册上多个事件

$('div').bind('click mouseenter', function(){
	console.log(1);
}).

局限性:不支持动态绑定(新创建的元素没有获取到事件)

unbind():把所有的事件都给解绑了
unbind():给元素的指定事件给解绑了

$('#btn').click(function(){
	$('div').unbind('mouseenter');
})

局限性:不支持动态绑定(新创建的元素没有获取到事件)

3.注册事件委托:delegate(seletor, type, fn)

$('div').delegate('p', 'click', function(){
	// 把点击事件注册给了div
	// 让元素P去触发
	alert(1);
})

解绑事件:undelegate
undelegate()解绑元素所有的委托事件
undelegate(seletor, type) => 解绑元素的指定的委托事件

$('btn').click(function(){
	$('div').undelegate('p', 'click');
})

4.on注册事件:on(type, seletor, data, fn)
参数:type:事件类名
seletor:选择器,由指定的选择器去触发,参数可选(存在on为事件委托)
data:数据,用于事件处理函数内部使用,可选
fn:事件发生运行的函数,可选

$('#box').on('click mouseenter', function(){
	alert(1);
})

解绑:off()
off():解绑元素所有的事件
off(type):解绑元素指定的事件
解绑元素的事件委托:off(type, seletor)

$('#btn').on('click', function(){
	$('#box').off('mousseenter');
})
// 解绑事件委托
$('#box').off('click', 'p');

5.触发事件与阻止事件传播
(1)触发事件的方式:
① 元素.事件()
② 元素.trigger(‘type’)

$('#btn').click();
$('#btn').tigger();

(2)阻止事件传播:
jQuery:return false能阻止事件传播(事件冒泡)和阻止浏览器的默认行为
js:return false阻止浏览器的默认行为
e.stopPropagation e.preventDefault()

// 节流阀
// keydown事件只要不松手就会一直触发

var open = true;
$(document).on('keydown', function(e){
	if(open){
		open = false;
		var keycode = e.keycode;
		console.log(keycode);
	}
})
$(document).on('keyup', function(e){
	open = true;	// 阀门打开
	var keycode = e.keycode;
})

另:事件的循环机制

事件的循环机制:js是一门单线程结构(同步异步问题)
(1) 异步代码:延时器 定时器 注册事件中的事件处理函数
(2) 宏任务(script timeout)和微任务(promise):先主线程执行完(事件循环),再执行异步代码(下一次循环)

八.jQuery的特点:

1.隐式迭代(偷偷地遍历)
(1)设置性操作,会给所有属性设置上相同的值
(2)获取性操作,只返回第一个元素对应的值
(3)想给每个元素设置不同的值,需要手动遍历jQuery对象

var arr = ['red', 'yellow', 'blue'];
for(var i = 0; i < $('li').length; i++){
	$('li').eq(i).css('backgroundcolor', a);
}

遍历:each遍历对象
语法:jQuery对象.each(function(index, ele){ })
参数:index => 遍历当前元素的下标
ele => 当前遍历的元素

2.链式编程(通过.继续操作,end方法(上次返回的对象))
对于设置性操作,会把当前的jQuery对象给返回出来,可以继续.操作
对于获取性操作,会返回具体的值,不再返回jQuery对象(所以i获取性操作后不可以再链式编程)

var ret = $('body').css('backgroundColor', '#000').text('修改内容').css('fontSize');

链式编程返回上一次的对象:end()方法
preObject => 找到上一次返回的jq对象,是个属性
end() => 把preObject属性封装成方法

// 五星好评案例	=>给点击的五角星设置为实心,前面的也设置为实心,后面的设置为空心
$(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);

九.插件(需要引入jQuery,再引入插件)

1.懒加载插件的使用:jquery.lazyload.js

引用之后需要配置才能实现效果
使用懒加载插件的步骤
① 引用jQuery,jQuery插件
② 修改图片标签
src改为data-original(看实际插件的使用,也有懒加载插件改为data-src)
添加了类名 => 方便找到需要懒加载的图片
最好加上width, height(不是必须)=> 统一图片大小
③ 在js中:$(“img.lazyload”).lazyload();

2.jQuery插件的原理:(jQuery的原型:$.fn().插件名(){ }) 懒加载插件(引入,配置)等
把插件提供的方法放在了jQuery的原型中
jQuery的实例对象都可以访问到原型中的方法
jQuery的原型:
① jQuery.prototype
② jQuery.fn
③ $.prototype
. f n 制 作 插 件 : .fn 制作插件: .fn.fn.插件名(){}

十.jQuery没有封装的DOM办法

(1)load() 加载资源,是H5提供的,jQuery没有封装这个方法
(2)paly() 播放音频或视频,H5提供的,jQuery没有封装这个方法
总结:load(),play()只能通过DOM对象进行调用

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页