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();切换元素的类样式的

５：把元素添加到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();//移除元素自身---自杀

 

６：自定义属性

//attr();可以写两个参数:1参数；属性,2属性值
//attr();只写了一个参数,获取该元素的这个属性的值
aObj.attr("title","自定义属性");
$("#dv").append(aObj);
console.log(aObj.attr("href"));

７：可以改变某一项选中

$("#btn").click(function () {
　$("#se").val(4);
});

<select id="se">
　<option value="４">北京</option>
</select>

８：

prop()可以真正的获取元素是否选中的状态
var flag=$("#ck").prop("checked");//获取选中状态
$("#checkbox").prop("checked",false);

９：设置left和top的值

console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
$("#dv").offset({"left":200,"top":200});

１０：设置宽和高

var width=$("#dv").width()*2;
var height=$("#dv").height()*2;
$("#dv").width(width);
$("#dv").height(height);

１１：获取scrollTop

$(document).click(function () {
//获取的卷曲出去的距离----->数字类型
console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});

１２：获取当前的索引

var index=$(this).index();

１３：绑定事件:

* bind:
* 绑定多个事件
* 参数:{"事件的类型":事件处理函数,....}
* delegate
* 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
* on
* 参数:父级元素.on("事件类型","子级元素",事件处理函数);

解绑事件:

* bind
* unbind
*
* on
* off
*
* delegate
* undelegate
如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑

１４：触发事件

$(function () {
$("#btn1").click(function () {
　　$(this).css("backgroundColor","red");
});
//点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
　　//$("#btn1").click();
　　//trigget()方法中需要写上触发事件的名字
　　//$("#btn1").trigger("click");//触发事件
　　$("#btn1").triggerHandler("click");//触发事件
});
});

１５：触发文本框的获取焦点的事件

$("#txt").focus();

１６：var keyCode=e.keyCode;//键盘按下后的键对应的键值

１７：取消事件冒泡＋取消超链接的默认的点击事件　　return false;

１８：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();

１９：不同的元素不同的设置方式--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