JQuery选择器和方法1

.cls {

background-color: red;

}

</style>

//ready的简写等所有元素加载完

$(function () {

//===============1 复合选择器===========================

//这是复合选择器，依次是id、类、标签

$("#d1,.cls,p").text("★");

//从form1中找

$("#form1 #d1,.cls,p").text("★");　//？？？

//==============2 层次选择器=============================

//找id=wrap div下所有的p元素(儿孙)

$("#wrap p").css("background-color", "pink");

//找id=wrap div下所有的直接子元素p（儿子）

$("#wrap > p").css("background-color", "pink");

//找id=wrap div后紧邻的那个div，必须紧挨着，之间不能有任何元素

$("#wrap + div").css("background-color", "pink");

//找id=wrap div后紧邻的那个p，必须紧挨着，之间不能有任何元素

$("#wrap + p").css("background-color", "pink");

//找id=wrap div后所有的p元素

$("#wrap ~ p").css("background-color", "pink");

//设置行内样式获取行内样式(值是这个"rgb(255, 192, 203)") ？？？

$("#wrap").css("background-color", "pink"); //如果找不到对象($("#wrap").length<1)，也不会报错

alert($("#wrap").css("background-color"));

//判断对象是否找到

if ($("#wrap").length > 0) {

alert("找到了");

} else {

alert("没找到");

}

//================3操作元素的属性========================

$("#btn").click(function () {

//设置元素的属性

$("#link").attr("href", "http://www.baidu.com");

//获取元素的属性

alert($("#link").attr("href"));

});

$("#btn1").click(function () {

//移除元素属性

$("#link").removeAttr("href");//将元素属性直接删除源代码中没有了

});

$("#btn2").click(function () {

//行内样式设置

$("#link").attr("style", "color:red");//不推荐这种用法

//1.不灵活只能设置一个值

//2.不能链式编程

$("#link").css("color", "red").css("....", "....");//推荐使用这种方法

//1.灵活可以设置多个值还可以赋值为json数据为参数

//2.能链式编程

//类样式设置

$("#link").attr("class", "cls")

});

//注：使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作

$("#btn3").click(function () {

//使用html()方法读取或设置元素的innerHTML

alert($("#link").html());//<font color="green">百度</font>

$("#link").html("<font color='green'>搜狐</font>");

//使用text()方法读取或设置元素的innerText

alert($("#link").text());//百度

$("#link").text("<font color='green'>搜狐</font>");

$(this).val("好耶");//this是按钮btn3

//$(Dom对象）=》将Dom对象转换成了JQuery对象

//$(字符串)=》标签选择器

});

</script>

</head>

<body>

<%--1--%>

</form>

<%--2--%>

123

<div>

我是内层div

</div>

</body>

</html>