JQ的特点与选择器Jquery (简称JQ)

一 Jquery一个JS框架。

这里的框架就是由多个函数( 功能 )组成,每一个功能都对应着一个函数。不需要关心这些函数的底层是如何实现的,只需要使用这些函数就可以了。

二 Jquery的特点

1 写的更少做做更多

2 JQ的容错性非常好

3 JQ是面向对象编程的一个框架,函数式编程风格,支持链式编程

4 目前主流分1- 和 2- 系列,区别就在于 1系列的JQ对低版本浏览器支持比较好,2 系列的就是对 h5 c3支持比较好( 一般做效果的时候1系列就可以 )

三JQ与JS的关系

01 JQ是由JS编写而成的一个JS框架,先有JS后有JQ。

02 一对script 标签中既可以写 JS 也可以写 JQ,但是二者不能混用。【不能用JQ的对象去调JS的方法,也不能用JS的对象去调JQ的方法】

03 JQ和JS可以互相转化:

1 JS转为JQ 只需要用 $( ) 将JS对象包裹起来就可以。

2 JQ转为JS可以使用 get(0) 的方法或者直接 obj[0] 的方式。

四 JQ显示隐藏功能

01 .show() : 让某一个对象显示

02 .hide() :让某一个对象隐藏

03 .toggle() :让某一个对象切换

上面三个方法是一组,都可以接收一个时间参数,单位是毫秒,用来控制动画的运动时长。

五JQ操作CSS

  1. 单属性操作:一次只能修改一个CSS属性

Obj.css( '属性名','属性值' )

  1. 多属性操作:一次可以修改多个属性,需要设置json格式参数

Obj.css( { '属性名1':'属性值1','属性名2':'属性值2'...... } );

01 多属性操作时 css 功能接收一个 { } 格式的参数

  1. 属性名和属性值之间用冒号隔开,组成一对,对与对之间用逗号隔开。

3 CSS获取方法

Obj.css( '属性名' )-->css方法同样可以获取某一个属性值,使用时只需要传入一个参数即可

六JQ操作HTML

.html不仅包括元素里的具体标签还包括号标签里的文字内容。

  1. 设置修改html

Obj.html( '需要设置内容' )

  1. 获取html

Obj.html( ); -->不设置参数就表示获取元素内容

七JQ里的基本选择器

Jq里的基本选择器和css选择器很类似( css怎么选 ,jq就可以怎么选 )

01 $('p')=>选中所有标签名为p的元素。

02 $( '.left' )=> 选中所有类名叫做 left 的元素

03 $( '#box' )=> 选中id名为box的元素

04 $( 'body > *' )=> 选中body下所有的一级子元素( 儿子 )

05 $( 'p + div' )=> 选中p后面紧跟着它的那个兄弟div

06 $( 'p~div' )=>选中p后面所有的兄弟 div 元素

07 $( 'ul li' )=> 选中ul下面的所有 li 元素

  1. ( 'h1,h2,h3' ) $( ':header' )==>这二个都是选中标题标签的写法

八JQ里的过滤选择器( 伪类选择器 )

伪类选择器一般配合基本选择器使用,在一组元素中过滤出一些元素。

01 $('li:first')=>选中所有li中的第一个

02 $( 'li:last' )=>选中所有li中的最后一个

03 $( 'li:not(:last)' )=>选中所有的li ,排除最后个,not的小括号里只能写选择器,不能写数字。

04 $( 'li:eq(2)' )=>选中所有li中的第三个li,:eq( ) 和 .eq( )是不同的选择器,.eq( )一般是写在基本选择器的外面。

05 $( 'li:gt( 2 )' )=>选中所有li中索引值大于2的那些li

06 $( 'li:lt( 2 )' )=>选中所有li中索引值小于2的li,需要注意gt和lt的小括号里面只能接收数值。

07 $( 'li' ).slice( 1,3 )=>选中所有li元素然后截取出索引值为1-2之间的li元素。

08 odd || :even=>选中索引值为奇数和偶数的元素。

九 JQ与JS中的this

在 JS中可以直接使用 this 关键字而不用事先定义,它能出现的位置有很多:事件中、定义时器、函数( 对象 ) ,如果this出现在事件操作中那么它就可以指代当前事件源。

对于this 可以理解为 谁用它,它就是谁

在JQ中使用this去调用 JQ方法时需要 $( this )-->将它转为JQ对象

十 下拉菜单

在JQ中设计者准备了 hover 事件,用它可以表示鼠标移上和离开二个操作,JS中没有hover 事件。默认接收二个参数,第一个表示鼠标移上,第二个表示鼠标离开。且这个二个参数都是函数。

$( ).hover( function(){

    // 鼠标移上事件

},function(){

    // 鼠标离开事件

} );

十一 动画排队

在JQ 中通过事件操作正常调用一个动画函数的时候,如果操作过于频繁那么就会产生一个动画排队的问题。默认情况下,正常排队要求所有动画都会按着顺序一个一个执行完。但更多的时候用户不需要看到某一个动画重复执行,所以可以利用JQ中的 stop() 将当次动画之前排队清除

$( ).stop().slideToggle( );

十二 表单的焦点事件

01 focus():表示JQ中的焦点获取事件

02 onfocus ():表示JS中的焦点获取事件

03 blur(): 表示JQ中焦点失去事件

04 onblur() :表示JS中焦点失去事件

焦点事件一般使用在表单用户可以进行输入的元素身上(比如: input textarea )

05 val(): 这个方法是JQ中专门用来操作 表单元素 value 属性的,通过它可以能 value 值进行设置和获取操作【 用法和 html 类似 】

十三 索引值

Index():利用这个方法可以求出某一个元素在它所有兄弟元素中的排序编号,编号从0开始。

$( ).index();

如果只希望获取到某一个元素在它同类中的排序,那么就可以在index中设置分类。

Index和eq的区别:

Index() 一般是求当前元素排第几,

eq() 一般是知道元素的编号去选出来。

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: