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元素, has里面过滤条件是标签元素,不能是选择器.
$("div").eq("5") // 选择第6个div元素, 注意:这里的索引排序为同一父元素下的同级元素.
$("div").not("#bb") //选择没有id为bb的div元素. not过滤条件的是选择器.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 id="div1">这是一个div标签</div>2. jquery属性操作
jquery操作思想二:同一个函数完成取值和赋值
2.1. 操作行间样式(css属性)
// 获取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样式2.3 操作其他属性
// 获取某个属性的值
var $id = $("div").prop("id");
var $src = $("#img1").prop("src");
// 设置图片的地址和alt属性
$("#img1").prop({src:"test.jpg",alt:"Text Image"});2.4 操作html内容
// 取出html内容
var $html = $("#div1").html();
// 设置html内容
$("#div1").html("<span>添加文字</span>");