jquery用法

引入jquery：

<script src=”js/jquery.mini.js”></script>

 

入口函数：等dom加载完毕执行

$(function(){
$(‘input’).hide();
})

 

$( ) = jquery( )    包装jquery对象

 

声明并打印dom对象到控制台

var myDiv =document.querySelector(‘div’);

console.dir(myDiv)

 

打印jquery对象（伪数组形式包装）

console.dir($(‘div’))

 

dom转化为jquery

$(dom)

$(‘video’)

var myvideo=document.querySelector(‘video’);

$(myvideo)

jquery没有play方法

 

dom方法播放

myvideo.paly()

或者将jquery对象转换为dom对象

$(‘video’)[0].play()

$(‘video’).get(0).paly()

 

• jquery常用选择器
• jquery样式操作
• jquery动画
• jquery属性操作
• jquery元素操作
• jquery元素尺寸位置操作

 

$常用功能和方法

jquery选择器

$(“选择器”)

类选择  $(‘.nav’)

和css选择器基本一致

console.log($(‘ul li’));

 

隐形迭代

$(“div”).css(“background-color”,”pink”);

$(“ul li”).css(“color”,”red”);

 

筛选选择器

$(‘li:first’).css(“background-color”,”red”); /* 第一个 */
$(‘li:last’).css(“color”,”red”); /* 最后一个 */
$(‘li:eq(2)’).css(“color”,”red”); /* 第三个 */
$(“li:odd”).css(“color”,”red”); /* 奇数 */
$(“li:even”).css(“background-color”,”red”); /* 偶数 */

console.log((“.son”).parent()); /* 查找父级 */
console.log((“ul”).children(“li”)); /* 查找亲儿子 */
$(“ul”).find(“li”).css(“color”,”red”); /* 选择所有后代子孙，等同于$(“ul li”)的后代选择器 */

$(“ol .item”).siblings(“li”).css(“color”, “red”); //选择除了自己以外的兄弟元素
$(“ol .item”).nextAll()(“li”).css(“color”, “red”); //选择除了自己之后的兄弟元素
$(“ol .item”).prevAll().css(“color”, “red”); //选择除了自己之前的兄弟元素
$(“ol .item”).hasClass().css(“color”, “red”); //选择除了自己以外的兄弟元素
$(“div:first”).hasClass(“类名”); //是否含有类名，返回T/F

$(“ol .item:eq(2)”).css(“color”, “red”); //选择第三个的兄弟元素

 

 

<script>
$(function(){
$(“button”).click(function(){
$(this).css(“background-color”,”red”);
$(this).siblings(“button”).css(“background-color”,””)
});
})
</script>