jQuery

jQuery

$ 是jQuery的*对象 也可以使用 jQuery代替

jQuery的入口函数:

$(function(){

})

jQuery 对象和DOM对象

使用jQuery方法和原生js获取的元素是不一样的

1、用原生js获取来的对象就是DOM对象

2、jQuery方法获取的元素就是jQuery对象。

3、jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪书组形式存储)。

jQuery对象和DOM对象转换

// 1.DOM对象转换成jQuery对象方法只有一种
var box = document.getElementById('box'); //获取DOM对象
var jQueryobject = $(box); //把DOM对象转换为jQuery对象


//2、jQuery 对象 转换为 DOM对象有两种方法
// 2.1、jQuery对象[索引值]
var domObject1 = $('div)[0]

// 2.2jQuery对象.get(索引值)
var domObject2 = $('div)[0]

基础选择器

ID选择器 $(’#id’) 获取指定的元素

全选选择器 $(‘*) 匹配所有元素

类选择器 $(’.class’) 获取同一类 class的元素

标签选择器 $(‘div’) 选取同一类标签的所有元素

并集选择器 $(‘div, p , li’)选取多个元素

交集选择器 $(‘li.current’)交集元素

层级选择器

子代选择器 $(‘ul>li’) 使用>号,获取亲儿子层级的元素:注意,并不会获取孙子层级的元素

后代选择器 $('ul li '); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

层级选择器

:list $(“li:first”) 获取第一个li元素

:last $(‘li:last’) 获取最后一个li元素

:eq(index) $(‘li:eq(2)’) 获取到li元素中,选择索引号为2的元素,索引号 index从0开始

:odd $(‘li:odd’) 获取到li元素中,选择索引号为奇数的元素

:even $(‘li:even’) 获取到li元素中,选择索引号位偶数的元素

jQuery设置样式

$(‘div’).css(‘属性’,‘值’)

jQuery里的排他思想

// 想要多选一的效果,排他思想:当前元素设置样式,其余兄弟元素清除样式
$(this).css('color',''red);
$(this).siblings().css('color','');

隐式迭代

//遍历内部 DOM元素(伪书组形式存储)的过程 就叫做隐式迭代
。
//简单理解 :给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
$('div').hide();//页面中的所有div全部隐藏,不用循环操作

链式编程

// 链式编程是为了节省代码量,看起来更优雅。
$(this).css('color','red').siblings().css('color','');

jQuery样式操作

jQuery中常用的操作有两种:css()和设置类样式方法

1、操作css方法

常用一下三种形式:

//1、参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
// 2、 参数是属性名,属性值,逗号隔开,是设置一组样式,
属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color','red');
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值不用冒号隔开,属性可以不用加引号
$(this).css({'color':'white'},'font-size':'20px');

常用的三种设置类样式方法:

//1.添加类
$('div').addClass('current');
//2.删除类
$('div').removeClass('current');
//3.切换类
$('div').toggleClass('current');

jQuery效果

显示隐藏:show() / hide()/ toggle();

划入划出:slideDown() / slideUp()/slideToggle();

淡入淡出:fadeIn()/fadeOut()/fadeToggle();/fadeTo();

自定义动画:animate();

jQuery属性操作

jQuery常用属性操作有三种 :prop()/attr()/data();

元素固有属性值prop()

固有属性就是元素本身自带的属性,比如元素里面的herf,比如元素里面的type。

语法获取属性语法

prop(‘属性’)

设置属性语法

prop(‘属性’,‘属性值’)

prop()除了普通属性操作,更适合操作表单属性:

disabled/checked/selected 等

元素自定义属性 attr()

用户自己给自己添加的属性,我们称为自定义属性。比如给div 添加index = 1

获取属性语法

attr(‘属性’) //类似原生getAttribute();

设置属性语法

attr(‘属性’,‘属性值’) //类似原生setAttribute()

attr()除了普通属性操作,更适合操作自定义属性。(该方法也可以获取H5自定义属性)

数据缓存data()

data()方法也可以在指定的元素上存取数据 并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都被移除。

附加数据语法

data(‘name’,‘value’)//向被选元素附加数据。

获取数据语法

data(‘name’) //向被选元素获取数据

注意:同时,还可以读取HTML5自定义属性 data-index,得到的是数字型。

jQuery文本属性值

jQuery的文本属性值常见操作有三种:html()/text()/val();

分别对应js中的innerHTML、innerText和value属性。

语法

1、普通元素内容html() (相当于inner HTML)

html() //获取元素的内容

html(‘内容’)//设置元素的内容

2、普通元素文本内容text() (相当于原生innerText)

text() //获取元素的文本内容

text(‘文本内容’)//设置元素的文本内容

3、表单的值 val() (相当于原生value)

val() //获取表单的值

val(‘内容’) //设置表单的值

遍历元素

语法1

$(‘div’).each(function (index,domEle){

xxx

});

1、each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个

2、里面的回调函数有两个参数,index是每个元素的索引号,domEle 是每个DOM元素对象,不是jQuery对象

3、所以要使用jQuery方法,需要给这个DOM元素转换为jQuery对象$(demEle)

注意:此方法用于遍历jQuery对象中的每一项,回调函数中元素为DOM对象,想要使用jQuery方法需要转换。

语法2

$.each(object,function(index,element){xxx;})

1、$.each()方法可用于遍历任何对象。主要用于数据处理,比如对象

2、里面的函数有2个参数;index是每个元素的索引号;element遍历内容

注意:此方法用于遍历jQuery对象中的每一项,回调函数中元素为DOM对象,想要使用jQuery方法需要转换。

创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多。重点使用以下部分

语法总合

1、创建

$(’

  • ’);

    动态的创建一个li

    2.1 内部添加

    element.append(‘内容’)

    把内容放入匹配元素内部最后面,类似原生 appendChild.

    element.prepend(‘内容’);

    把内容放入匹配元素内部的最前面。

    2.2外部添加

    element.after(‘内容’) // 把内容放入目标元素后面

    element.before(‘内容’) // 把内容放入目标元素前排

    1、内部添加元素,生成之后,它们是父子级关系。

    2、外部添加元素,生成之后,它们是兄弟级关系。

    3.删除元素

    element.remove() //删除匹配的元素(本身)

    element.empty() //删除匹配的元素集合中所有的子节点

    element.html(’’) //清空匹配的元素内容

    3.1 remove 删除元素本身。

    3.2 empty() 和html()作用等价,都可以删除元素里面的内容,只不过html还可以设置内容。

    ps: 以上只是元素的创建、添加、删除方法的常用方法,其他方法自行去查阅API

    jQuery尺寸、位置操作

    jQuery尺寸操作

    jQuery尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型。

    width()/height() 取得匹配元素宽度和高度值 只算width/height

    innerWidth()/innerHieght() 取得匹配元素的宽度和高度包括padding

    outerWidth() / outerHeight() 取得匹配元素宽度和高度值包括padding、border

    outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度住包括padding、border、margin

    以上参数为空,则是获得相应值,返回的是数字型。

    如果参数为数字,则是修改相应的值。

    参数可以不必写单位。

    jQuery位置操作

    jQuery的位置操作主要有上:offset()、position()、scrollTop()scrollLeft()

    offset()设置或获取元素便宜

    1、offset()方法设置或返回被元素相对于文档的偏移坐标,跟父级没有关系。

    2、该方法有两个属性 left、top、offset().top 用于获取文档顶部的距离,offset().left 用于获取文档左侧的距离。

    3、可以设置元素的偏移 :offset({top:10,left:30});

    position() 获取元素便宜

    1.position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。

    2.该方法有2个属性left、top、position().top用于获取距离定位父级顶部的距离,position().left用于获取距离父级左侧的距离。

    3.该方法只能获取

    scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

    1、scrollTop()方法设置或返回被选元素被卷去的头部。

    2.不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。

    jQuery事件注册

    jQuery为我们提供了方便的事件注册机制。

    优点:操作简单,且不用担心事件覆盖等问题

    缺点:普通的事件注册不能做事件委托,且无法实现事件节绑,需要借助其他方法。

    语法:

    element.事件(function(){})

    $(‘div’).click(function(){事件处理程序})

    其他事件和原生基本一致。

    比如mouseover、mouseout、blur、focus、keydown、keyup、resize、scroll等

    jQuery事件处理

    on(): 用于事件绑定,目前最好用的事件绑定方法

    off():事件解绑

    trigger()/triggerHandler():事件触发

    语法

    on的优势1

    可以绑定多个事件,多个处理事件处理程序。

    $('div').on({
      mouseover:function(){},
      mouseout:function(){},
      click:function(){},
    });
    如果事件处理程序相同
    $('div).on('mouseover','mouseout',function(){
      $(this).toggleClass('current');
    });
    

    on()方法优势2

    可以事件委派操作。事件委派定义是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

    $('ul').on('click','li',function(){
      alter('hello world');
    })
    

    on()方法优势3

    动态创建的元素,click()没有办法绑定事件,on可以给动态生成的元素绑定事件

    $('div').on('click','p',function(){
      alert('俺可以给动态生成的元素绑定事件')
    });
    $('div').append($('<p>我是动态创建的p</p>))
    

    事件处理off()解绑事件

    当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。jQuery为我们提供了多种事件解绑方法:die()/undelegate()/off()等甚至还有支出法一次的事件绑定方法one(),

    off()语法

    $(‘p’).off() //解绑p元素的所有事件处理程序

    $(‘p’).off(‘click’) //解绑p元素上面的点击事件

    $(‘ul’).off(‘click’,‘li’) // 解绑委托事件

    如果有的事件只想触发一次,可以使用one()来绑定事件。

    事件处理trigger()自动触发事件

    有些时候,在某些特定的条件下,我们希望某些事件能够自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。jQuery为我们提供了两个自动触发事件trigger()和triggerHandler();

    语法

    第一种:trigger()

    element.click() //第一种简写形势

    element.trigger(‘type’) //第二种自动触发模式

    第二种:triggerHandler()

    element.triggerHandler(type) //第三种自动触发模式

    triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。

    triggerHandler模式不会触发元素的默认行为,这是前面两种的区别。

    jQuery事件对象

    jQuery对DOM中的事件对象event进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

    语法:

    element.on(events[selector],function(event){})

    阻止默认行为:event.preventDefault() 或者 return false

    阻止冒泡:event.stopPropagation()

    jQuery拷贝对象

    jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用。

    语法:

    $.extend([deep],target,object1,[objectN])

    1.deep:如果设为true为深拷贝,默认为false 浅拷贝

    2.target:要拷贝的目标对象

    3.object1:待拷贝到第一个对象的对象。

    4.objectN:待拷贝到第N个对象的对象。

    5.浅拷贝目标对象引用的1被拷贝的对象地址,修改目标对象会影响被拷贝对象

    6.深拷贝,前面加ture,完全克隆,修改目标对象不会影响被拷贝对象。

    多库共存问题

    实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为,jQuery 多库共存。

    语法:

    jQuery解决方案

    1、把里面的$符号统一改为jQuery。比如jQuery(‘div’)

    2、jQuery变量规定新的名称:$.noConflict()

    var xx = $.noConflict()

    ps :该用插件就用插件 别整那么没用的

上一篇:利用jquery制作分页器


下一篇:jQuery