jquery
1:把jQuery对象转DOM对象两种方式:
$(btnObj).get(0);---->DOM对象
$(btnObj)[0];----->DOM对象
2:常见的几个方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
.css()方法,.设置元素的样式,类似于style
3:获取元素
#select>option:selected 被选中的option
获取的是div中所有的p标签元素
$("#dv p").css("backgroundColor","red");
获取的是div中所有直接的子元素
$("#dv>p").css("backgroundColor","red");
获取的是div后面的第一个p标签元素
$("#dv+p").css("backgroundColor","red");
获取的是div后面所有直接的兄弟元素p标签元素
$("#dv~p").css("backgroundColor","red");
$("ul>li:even").偶数
$("#uu>li:eq(4)") 获取ul中的索引为4的li标签元素
.next();获取的是当前元素的下一个兄弟元素
$(this).next().css("backgroundColor","green");
.nextAll();获取的是当前元素的后面的所有的兄弟元素
$(this).nextAll().css("backgroundColor","green");
.prev();获取的是当前元素的前一个兄弟元素
$(this).prev().css("backgroundColor","green");
.prevAll();获取的是当前元素的前面的所有的兄弟元素
$(this).prevAll().css("backgroundColor","green");
.siblings();获取的是当前元素的所有的兄弟元素(自己除外)
$(this).siblings().css("backgroundColor","green");
var spanObj=$("#dv>span").clone();//克隆
选择checkbox
<div id="dv">
<input type="checkbox" value="1"/>吃饭
</div>
$("#dv :checkbox")
4:添加样式
* .css()
* .css("属性","属性值");
* .css("属性","属性值").css("属性","属性值");
* .css({"属性":"属性值","属性":"属性值"});
* addClass()
* addClass("类样式名字");添加一个类样式
* addClass("类样式名字1 类样式名字2");
* removeClass()
* removeClass("类样式名字");移除类样式
* removeClass();移除的是当前元素中所有的类样式
* hasClass();判断当前元素是否应用了某个类样式
* toggleClass();切换元素的类样式的
5:把元素添加到div中
把超链接追加到div中
$("#dv").append(aObj);//把超链接追加到div中
把pObj对象主动的加到div中
pObj.appendTo($("#dv"));
把元素插入到某个元素的前面
$("#dv").prepend(aObj);
把元素添加到当前元素的后面(兄弟元素来添加)
$("#dv").after(aObj);
把元素添加到当前元素的前面(兄弟元素来添加)
$("#dv").before(aObj);
$("#dv").html("");//清空元素中的内容
$("#dv").empty();//清空元素中的内容
$("#dv").remove();//移除元素自身---自杀
6:自定义属性
//attr();可以写两个参数:1参数;属性,2属性值
//attr();只写了一个参数,获取该元素的这个属性的值
aObj.attr("title","自定义属性");
$("#dv").append(aObj);
console.log(aObj.attr("href"));
7:可以改变某一项选中
$("#btn").click(function () {
$("#se").val(4);
});
<select id="se">
<option value="4">北京</option>
</select>
8:
prop()可以真正的获取元素是否选中的状态
var flag=$("#ck").prop("checked");//获取选中状态
$("#checkbox").prop("checked",false);
9:设置left和top的值
console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
$("#dv").offset({"left":200,"top":200});
10:设置宽和高
var width=$("#dv").width()*2;
var height=$("#dv").height()*2;
$("#dv").width(width);
$("#dv").height(height);
11:获取scrollTop
$(document).click(function () {
//获取的卷曲出去的距离----->数字类型
console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});
12:获取当前的索引
var index=$(this).index();
13:绑定事件:
* bind:
* 绑定多个事件
* 参数:{"事件的类型":事件处理函数,....}
* delegate
* 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
* on
* 参数:父级元素.on("事件类型","子级元素",事件处理函数);
解绑事件:
* bind
* unbind
*
* on
* off
*
* delegate
* undelegate
如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
14:触发事件
$(function () {
$("#btn1").click(function () {
$(this).css("backgroundColor","red");
});
//点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
//$("#btn1").click();
//trigget()方法中需要写上触发事件的名字
//$("#btn1").trigger("click");//触发事件
$("#btn1").triggerHandler("click");//触发事件
});
});
15:触发文本框的获取焦点的事件
$("#txt").focus();
16:var keyCode=e.keyCode;//键盘按下后的键对应的键值
17:取消事件冒泡+取消超链接的默认的点击事件 return false;
18:return this;
function Student(name) {
this.name=name;
this.sayHi=function (name) {
if(name){
console.log("俺是"+name);
return this;
}else{
console.log("我的名字叫"+this.name);
return this;//把当前对象返回
}
};
this.eat=function () {
console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
};
}
var stu=new Student("小明");
stu.sayHi().eat();
19:不同的元素不同的设置方式--each方法
$(function () {
//页面加载后,让每个li的透明度发生改变
//不同的元素不同的设置方式--each方法
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
//console.log(arguments[0]+"====="+arguments[1]);
$(element).css("opacity",(index+1)/10);
});
});
20:trigger的用法
$(window).on("resize",function(){
var width = $(window).width();
if(width > 768){
$(".carousel-inner").addClass("wjs_pc_banner");
$(items).each(function(index,value){
var item = $(this);
item.css("backgroundImage","url('./images/slide_0"+ (index+1) +"_2000x410.jpg')")
});
} else {
$(".carousel-inner").addClass("wjs_phone_banner");
$(items).each(function(index,value){
var item = $(this);
item.html("<img src='./images/slide_0"+ (index+1) +"_640x340.jpg'>");
});
}
}).trigger("resize");
21: 获取宽度的方法的说明:
* width():它只能得到当前元素的内容的宽度
* innerWidth():它能获取当前元素的内容的宽度+padding
* outerWidth():获取当前元素的内容的宽度+padding+border
* outerWidth(true):获取元素的内容的宽度+padding+border+margin