分针网—IT教育：JQuery 基础

JQuery是一个非常优秀的js库。

选择元素

$( )里可以填css选择器

  
  

   
   $
   
   (
   
   '.demo'
   
   )
   
   .
   
   css
   
   (
   
   'background-color'
   
   ,
   
   'red'
   
   )
   
   ;
  
  

$( )里可以填原生DOM

  
  

   
   var oDiv 
   
   = document
   
   .
   
   getElementById
   
   (
   
   'demo'
   
   )
   
   ;
  
  
  
  

   
   $
   
   (oDiv
   
   )
   
   .
   
   css
   
   (
   
   {
   
   'background-color'
   
   :
   
   'red'
   
   ,
   
   'height'
   
   :
   
   '100'
   
   }
   
   )
   
   ;
  
  

$( )里可以填null，false，undefined

$( function ( ) { } )

选出 div下的span

  
  

   
   $
   
   (
   
   'span'
   
   ,
   
   'div'
   
   )
   
   .
   
   css
   
   (
   
   {
   
   'background-color'
   
   :
   
   'red'
   
   }
   
   )
   
   ;
  
  
  
  

   
   $
   
   (
   
   'div span'
   
   )
   
   .
   
   css
   
   (
   
   {
   
   'background-color'
   
   :
   
   'red'
   
   }
   
   )
   
   ;
  
  

JQuery特有的选择规则

  
  

   
   $
   
   (
   
   'ul>li:first'
   
   )
   
   ;
   
   // 操作的是第一个li
  
  
  
  

   
   $
   
   (
   
   'ul>li:eq(2)'
   
   )
   
   ;
  
  
  
  

   
   $
   
   (
   
   'ul>li'
   
   )
   
   .
   
   eq
   
   (
   
   2
   
   )
   
   ;
   
   //操作的是第二个li   ’eq‘的值可以从0开始
  
  
  
  

   
   $
   
   (
   
   'ul>li:odd'
   
   )
   
   ;  
   
   //选择第奇数个 (1 3 5 7...)
  
  
  
  

   
   $
   
   (
   
   'ul>li:even'
   
   )
   
   ; 
   
   //选择第偶数个 (0 2 4 6 ...)
  
  

eq的值可以从0开始

$()里返回的是一个JQuery对象

常用的方法

1.filter( )

规定某个条件，将不符合条件的元素从选择中移除，返回符合条件的元素

filter()里可以放选择器，函数，JQuery对象

2.has( )

可以用于检测某个元素是否在另一个元素中，返回的符合条件的对象给父级元素

has( )里可以放选择器，原生DOM

3.not( )

效果与filter相反

4.is( )

判断前面返回的DOM是否与后面相同，返回的不是对象，所以不能进行链式调用

如果前面返回的DOM有很多个，后面只要有一个与前面相同，返回结果都是TRUE

is( )里可以放选择器，函数，JQuery对象，DOM元素

5.find( )

获得当前元素集合中每个元素的后代

在一个集合中找符合条件的子集

取值赋值函数统一性

html

基于innerHTML,获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。

  
  

   
   <
   
   !
   
   -- html 
   
   --
   
   > 
  
  
  
  
   
   
   <ul
   
   >
  
  
  
  
      
   
   <li
   
   >
   
   1
   
   <
   
   /li
   
   >
  
  
  
  
      
   
   <li
   
   >
   
   2
   
   <
   
   /li
   
   >
  
  
  
  
      
   
   <li
   
   >
   
   3
   
   <
   
   /li
   
   >
  
  
  
  
      
   
   <li
   
   >
   
   4
   
   <
   
   /li
   
   >
  
  
  
  
  
   
   <
   
   /ul
   
   >
  
  
  
  

   
   //javascript
  
  
  
  

   
     console
   
   .
   
   log
   
   (
   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   html
   
   (
   
   )
   
   )
   
   ;
  
  

打印结果只有1，.html( )方法和.css( )方法一样，( )内不填内容表示取值，在取值时候，只能取到第一个元素的值；( )内填内容是赋值，会将所有li都赋上值，( )内可以添加标签

  
  

   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   html
   
   (
   
   '<span>aaa</span>'
   
   )
   
   ;
  
  

text

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容

  
  

   
   //在li内插入span
  
  
  
  

   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   html
   
   (
   
   '<span style="background-color: orange">lalal</span>'
   
   )
   
   ;
  
  
  
  

   
   //将li内的span标签替换成123
  
  
  
  

   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   text
   
   (
   
   '123'
   
   )
   
   ;
  
  

css

想同时改变多个css属性，可以用对象的形式

  
  

   
   //采用小头峰写法
  
  
  
  

   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   css
   
   (
   
   {width
   
   : 
   
   100
   
   ,height
   
   :
   
   20
   
   ,backgroundColor
   
   :
   
   'orange'
   
   }
   
   )
   
   ;
  
  
  
  

   
   //利用css样式
  
  
  
  

   
   $
   
   (
   
   'ul li'
   
   )
   
   .
   
   css
   
   (
   
   {
   
   'width'
   
   : 
   
   '100px'
   
   ,
   
   'height'
   
   :
   
   '20px'
   
   ,
   
   'backgroundColor'
   
   :
   
   'orange'
   
   }
   
   )
   
   ;
  
  

想取值时要传参，选择具体要取出的样式，不能一次取出所有属性。

attr / prop

获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。

prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)

next()

下一个兄弟节点

prev()

上一个兄弟节点

index()

当前兄弟节点中的索引

链接：http://www.f-z.cn/id/164

学习更多IT知识 加群： 272292492