jquery

---恢复内容开始---

载入执行

$(document).ready(function(){

alert('jquery!');

})

 

function test(){

alert('111');

}

$(test);

等同于

$(document).ready(test());

等同于

$(document).ready(function test(){

alert('111');

});

 

选取元素

obj = $('.demo2‘);取类

obj = $('#demo2')，取ID

obj = $('p')，取p标签

 

获得值

console.log(obj.html()); 等同于js的innerHtml,获得文本带格式

console.log(obj.text());等同于js的innerText，获得不带格式内容

console.log(obj.val());等同于js的value 

赋值时直接将内容放到括号里面

 

子代的选取

obj = $('.demo2 p‘);取.demo2类下的后代p标签,后代全部包括

obj = $('.demo2>p‘);取.demo2类下的子代p标签，只包括儿子

obj = $('.demo2 li').eq(1);  demo2类下第一个li儿子

obj = $('.demo2').find('span');

obj = $('.demo2').children('li').children('span');

obj = $('.demo2').parent(); demo2类的父亲

obj = $('.demo2').siblings(‘li’); demo2类的兄弟，不包含本身

obj = $('.demo2').next(); demo2类的下一个兄弟

obj = $('.demo2').prev(); demo2类的上一个兄弟

 

计算元素的个数

obj = $('.demo2 li');         获取demo2类下li子代的个数

console.log(obj.length);    用.length来获取

 

添加样式

obj.css();

例如：obj.css('color','red');添加字体为红色的样式

添加类

obj.addClass('a'); 添加a类

obj.hasClass('a');判断是否存在a的类

obj.remove('a');去除a类

 

点击元素添加样式，兄弟去除样式

HTML中：

<p onclick="test(this)">评价</p>

<p onclick="test(this)">点赞</p>

<p onclick="test(this)">评论</p>

js中

function test(obj){

$(obj).addClass('a');

$(obj).siblings('p').removeClass('a');

}

等价于

HTML中

<p>评价</p>

<p>点赞</p>

<p>回复</p>

js中

$(document).ready(function(){

$('p').each(function(){

$(this).click(function(){

$(this).addClass('a');

$(this).siblings('p').removeClass('a');

})

})

})

或者

function a(){

$('p').each(function(){

$(this).click(function(){

$(this).addClass('a');

$(this).siblings('p').removeClass('a');

})

})

}

a();