分针网—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