JQuery选择使用

学习心得

一、专业课

1.反选checkbox实现

$("#in3").click(

function(){

//选中每一个元素都会去执行

//alert(1);

$("input[type=checkbox]").each(

function(){

//获取属性的值trueor false

if($("this").prop("checked")){

$(this).removeAttr("checked");

}else{

$(this).prop("checked",true);

}

}

);

}

);

2.获取选中的值

$("select1").change(

function() {

$(":selected").each(

function(){

//alert($(this).val);//$(this)== jq变量

alert(this.value);//this== js变量

}

);

}

);

3.使用jQuery遍历祖先元素

$(document).ready(

function(){

//获取直接父元素

//$("#li1").parent().css("color","red");

//返回所有父元素

//$("span").parents().css("color","orange");

//有多个span时，从底部开始找，从底部开始算

//$("span").parents().eq(1).css("color","orange");

//不包括#d1，从0开始算

//*$("span").parents("#d1").eq(1).css("color","orange");

//不包括#d1，从0开始算

//$("span").parentsUntil().css("color","orange");//==$ (span)

//不包括#d1，从0开始算 查找在span~#d1之间的祖先元素，不包 括#d1

//$("span").parentsUntil("#d1").eq(0).css("color","green");//==$(span)

//所有子元素

//$("#u2").children().css("color","green");

//$("#u2").children("#li4").css("color","red");

//查找所有

//varlen = $("#d3").find("*").length;

//alert(len);

//过滤查找后代元素中span的第二元素

//$("#d3").find("span").eq(1).css("color","orange");

//同胞元素

//$("#li1").siblings().css("color","red");

//加过滤条件 同胞元素中有id为li2的元素

//$("#li1").siblings("#li2").css("color","green");

//下一个同胞元素

//$("#li1").next().css("color","red");

//返回所有的同胞元素

//$("#li1").nextAll("").css("color","red");

//有过滤的条件

//$("#li1").nextAll(".c1").css("color","green");

//返回参数之间的所有后面同胞元素 不包括条件的元素(.c3)

//$("#li1").nextUntil(".c3").css("color","green");

//没参数时候

//$("#li1").nextUntil().css("color","red");

//$("#li1").nextUntil().eq(3).css("color","red");

//往前面找同胞元素

//$(".c3").prev().css("color","orange");

//$(".c3").prevAll().css("color","yellow");

//$(".c3").prevAll("#li2").css("color","blue");

//$(".c3").prevAll().eq(0).css("color","green");

//$(".c3").prevUntil().css("color","green");

//$(".c3").prevUntil("#li1").css("color","green");

$("p").first().css("color","orange");

}

);

4.dom节点操作

$(document).ready(

function(){

//创建节点

var$obj = $("<li id='d1'>衡阳</li>");

//追加节点,内部节点后追加

//$("#city").append($obj);

//$obj.appendTo($("#city"));

//在内部前面追加

//$("#city").prepend($obj);

//$obj.prependTo($("#city"));

//在元素外部添加

//后面

//$("#city").after($obj);

//$obj.insertAfter($("#city"));

//前面

//$("#city").before($obj);

//$obj.insertBefore($("#city"));

/*$("li").click(

function(){

$(this).remove();

}

);*/

}

);

$(document).ready(

function(){

$("li").click(

function(){

//$(this).remove();

}

);

//清空

//$("#city").empty();

});

学习心得：

1.业精于勤荒于嬉。