jquery选择器和样式操作

1. jquery选择器

1.1. jquery用法思想一

选择某个页面元素, 然后对它进行某种操作.

1.2. jquery选择器

jquery选择可以快速地选择元素, 选择规则和css样式相同, 可以使用length属性判断是否选择成功.

$("#myId") // 选择id为myId的网页元素
$(".myClass")// 选择class为myClass的元素
$("li") // 选择所有的li标签元素
$("#ul1 li span") // 选择id为ul1元素下的所有li下的span
$("input[name=fisrt]") // 选择name属性等于first的input元素

1.3. 选择集过滤

$("div").has("p") // 选择包含p元素的div元素
$("div").eq("5") // 选择第6个div元素, 注意:这里的索引排序为同一父元素下的同级元素.

1.4. 选择集转移

注意: 这里的同级元素都只针对于在同一父元素下

$("#box").prev() // 选择id是box的元素前面紧挨的同级元素
$("#box").prevAll // 选择id是box的元素前面所有的同级元素
$("#box").next() // 选择id是box的元素后面紧挨的同级元素
$("#box").nextAll // 选择id是box的元素后面所有的同级元素
$("#box").siblings() // 选择id是box的元素的同级元素
$("#box").children() // 选择id是box的元素的所有子元素
$("#box").parent() // 选择id是box的元素的父元素
$("#box").find(".myClass")// 选择id是box的元素内的class等于myClass的元素

1.5. length属性判断是否选择到了元素

jquery有容错机制, 即使没有找到元素, 也不会报错(此时length等于0), 可以用length属性来判断是否找到了这个元素. length的值就是我们找到的元素数.

alert($("#div1").length) // 弹出1
alert($("#div2").length) // 弹出0,此时没有找到元素
......
这是一个div标签

2. jquery样式操作

jquery操作思想二:同一个函数完成取值和赋值

2.1. 操作行间样式

// 获取div元素的样式
$("div").css("width");

// 设置div的样式
$("div").css("width", "30px");
$("div").css({"height":"30px", "color":"red"});

注意:选择器获取多个元素时, 获取样式信息获取的是第一个元素的样式信息

2.2. 操作样式类名

$("#div01").addClass("divClass01")// 为id为div01的对象追加div样式divClass01
$("#div01").removeClass("divClass01")// 移除id为div01的对象的class名为divclass01的样式
$("#div01").removeClass("divClass01 divClass02")// 移除多个样式
$("#div01").toggleClass("anotherClass")// 重复切换anotherclass样式