jQuery
2017-10-31 本文已影响0人
likeli
通过Jq获取到的元素是JQ对象，通过元素的document.get***获取到的元素是原生对象，原生对象不能使用JQ里面的方法和属性，JQ对象调用原生的方法和属性
JQ对象和原生对象可以相互转换
- 原生对象如何转JQ : 直接使用 $(原生对象)
var content=document.getElementsByClassName("content")[0];
$(content).css("color","red"); - JQ对象如何转原生对象 方法1 直接在前面加[0] 方法2 JQ对象.get(0)
$(".content")[0].innerHTML="显示"
$(".content").get(0).innerHTML="显示2"
获取元素 $("")里面给的是字符串-选择器
- first 是第一个P标签
console.log($("p:first")); - odd基数索引 even偶数索引
$("p:odd").css("color","red");
$("p:even").css("color","red"); - eq(2)从 0 开始计数
$("p:eq(2)").css("color","red") - gt(2)从 0 开始计数 2之后的变换
$("p:gt(2)").css("color","red")
创建元素 添加元素 append添加 appendTo加入到
p.append(span)给p插入子集span
p.appendTo(body)把p插入body里面
prepend和prependTo用法和append一样，不同点在于prepend是在最前面插入
$("<p class='item2' style='color:green;'>插个P标签</p>").prepend($("<span>span标签</span>")).prependTo($(".box"))
$(".item2").before($(".content"))
- after content 后面有一个item2
$(".content").after($(".item2")) - insertAfter 把item2插入到content之后
$(".item2").insertAfter($(".content")) - 包裹p 把每个p包裹在div内 wrapAll把所有的p都包裹在同一个div里面，父级在第一个p的位置
$("p").wrap("<div class='BB'></div>");
当参数是函数的时候，jq会把函数的返回值作为包裹p父级来使用 - unwrap 把父级消失
$(".content").unwrap(".box") - 把所有段落内的每个子内容加粗
$("p").wrapInner("<b>12</b>"); - 删除元素
remove这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
修改/获取CSS样式 css和style 属性都可以获取到
筛选
console.log($("p:eq(1)").css("color"));
console.log($("p").eq(1).css("color"));
设置样式第一种样式
$("p").css("color","pink");
设置样式第二种样式
$("p").css({
color:"red",
border:"1px solid green"
} )
设置样式第三种样式
var cArr=["yellow","red","green","purple","cyan","pink"]
$("p:last").css("color",function(index,oldvalue){
console.log(index,oldvalue);
return cArr[index];
})
修改/获取内容
$("p").html("<div>hello</div>")
$("img").attr("src", "1.png");
将文档中图像的src属性删除
$("img").removeAttr("src");
JQ2属性和事件
自定义属性，使用谁谁就能获取到
HTML元素本身就带有的固有属性，在处理时，使用prop方法。
HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
获取src的时候，prop是绝对路径
$(":button").prop("index","10")
$(":button").attr("index","10")
$("input[type=button]").click(function(){
// 获取属性
// 获取系统自带的属性可以使用prop
console.log($(":checkbox").attr("checked"));
console.log($(":checkbox").prop("checked"));
console.log($(":button").prop("index"));
console.log($(":button").attr("index"));
// 设置属性
// console.log($(":checkbox").attr("checked",true));
console.log($(":checkbox").prop("checked",""));
$(".box").toggleClass("box1");
})
$("p").html("Hello <b>world</b>!");
$("p").text("Hello <b>world</b>!");
$("input").val("Helloworld!");
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
$(".content").css("position","absolute");
$(".content").css("left",100);
移交$使用权
正常情况下$代表的是JQ如果和其他变量名有冲突，JQ就会把$的使用权交出去，以后就不能用$代表JQ了
用变量接受返回值后，这个变量就是JQ
var $$=$.noConflict();
JQ事件绑定
事件绑定
$("div p:first-child:first").click(function(){
alert("哈哈哈哈")
})
on是绑定事件，四个参数 div.on("type","selector",obj,fn)
- type字符串类型，放的是事件类型
- selector字符串类型，是选择器，代表过滤，只有这个选择期内的元素才能触发事件
- obj字符串类型，给事件传的参数
- fn函数，事件触发后执行的函数
off解除绑定时间
- div.off();//移除所有类型的事件
- div.off("click");//移除所有类型的点击事件
- div.off("click",fn);//移除指定的点击事件
- div.one()绑定一次的点击事件，只能点一次
for in可以遍历对象，遍历对象的时候可以得到对象的所有属性名，遍历数组得到的是下标
var arr=["hello","old","are","you"];
for(index in arr){
console.log(index)
console.log(arr[index])
}
var obj={name:"明月",age:18}
for(key in obj){
console.log(key,obj[key])
}
JQ里面的遍历对象each
$("p").each(function(index,obj){
// 遍历$("p")这个集合，
// 得到下标和每一个p标签obj
console.log(index,obj.innerText)
})
$("p").each(function(index,obj){
$(this).click(function(){
console.log(index,this.innerText)
})
})
