Jquery基础

一、筛选选择器

$(function(){})
$("选择器")
$("div").css("background", "pink")

$("ul li:last").css("background" ,"pink")//最后一个
$("ul li:eq(2)").css("background" ,"pink")//索引号2
$("ul li:odd").css("background" ,"pink")//奇数
$("ul li:even").css("background" ,"pink")//偶数
$("div").parent()//最近的父级
$("ul li").siblings()//兄弟
$（“this”）.find(".small")

$(".nav>li").mouseover(function(){
$(this).children("ull").show();
})
$(".nav>li").mouseout(function(){
$(this).children("ull").hide();
})

二、链式编程

$(this).css("backgroung","black").siblings().css("background","")

$("div").css({
?? ?width : 400,
?? ?background : "pink",
?? ?height : 300
})

$(this).addClass("add")//添加类
$(this).removeClass("remove")//移除类
$(this).toggleClass(“toggle”)//切换类

$("div").slideDown()//下拉
$("div").slideUp()//上拉
$("div").slideToggle()//滑动切换

三、事件切换

hover(over,out)
$(".nav>li").hover(function(){
?? ?$("div").slideDown()?? ?
}，funtion(){
?? ?$("div").slideUp()
})
//经过离开都会触发
$(".nav>li").hover(function(){
?? ?$(this).children("ul").slideToggle()
})
//stop()停止动画排队
$(".nav>li").hover(function(){
?? ?$(this).children("ul").stop().slideToggle()
})

//淡入淡出效果
$("div").fadeIn(1000)
$("div").fadeOut(1000)
$("div").fadeTo(速度1000,透明度0.5)
$("div").fadeToggle(1000)

四、自定义动画animate

$("div").animate(1000)

$("div").html()//获取设置元素内容
$("div").text()//获取设置元素文本内容
$("input").val()//获取设置表单值

$(this).parents("all")//返回指定祖先元素

//遍历
$("div").each(function(index,domEle){
?? ?//第一个参数一定是索引号，可自定义索引号名称
?? ?//第二个参数一定是dom元素对象
})

$.each()方法主要用于遍历数据，处理数据
$.each($("div"),function(i,ele){})

五、元素操作

1.创建元素
var li = $("<li>内部添加</li>")
2.添加元素
2.1内部添加
$("ul").append(li)//放在内容最后面
$("ul").prepend(li)//放在内容最前面
2.2外部添加
var div = $("<div>内部添加</div>")
$(".test").after(div)//放在目标元素的后面
$("test").before(div)//放在目标元素的前面
内部添加元素生成后，是父子关系；
外部添加元素生成后，是兄弟关系；
3.删除元素
$("ul").remove()//删除匹配的元素
$("ul").empty()//删除匹配元素里面的子节点
$("ul").html("")//清空匹配的元素