震惊!!!!看完本文立即精通JQuery

 

$(dom对象);//把dom对象转为jQuery对象

 

$对象[0]//此为dom对象,可以用dom方法

 

$("body").hasClass(name);//时候应用了类样式,返回值布尔

$("body").addClass("name");//如果多个类同时添加中间用空格隔开 "cla1 cla2"

$("body").remove("name");

$("body").toggleClass("name");//切换类样式,(开关)

$("body").css("backgroundColor","black");//设置body的背景色为黑色

 

$("btn").val();//获取按钮的value值

$("btn").val("str");//设置按钮value值为str

 

$(window).load(func(){});//页面全部加载完触发(图片css引入等)

$(window).ready(func(){});//页面基本元素加载完触发

jQuery(func(){});//和ready一样

$(func(){});//和ready一样

 

$("div").mouseenter(func(){});//鼠标进入

$("div").mouseleave(func(){});//鼠标离开

.scroll(func(){});//滚动事件

.bind("click",func(){});//绑定事件另一种写法,可以直接传对象{"click":func},如果绑定多个bind(方法链),只执行最后一个

父.delegate("子",type,func(){});//父元素调用代理方法,为子元素绑定事件type

 

$xx.on("click",func(){})

$xx.on("click",'a',func(){})//给xx下的a标签绑定点击事件

 

解绑事件:推荐用什么绑定就用什么解绑

.unbind("click");//括号中没参数,解绑所有事件

.undelegate();("p","click");//如果没有参数就是解绑

元素.off();//该元素下所有事件解绑(包括子元素)

元素.off("click");//同上,只解绑click事件

元素.off("click more..","p");//同上,解绑该元素下p的click事件

元素.off("","p");//p的所有事件都解绑

元素.off("click","**");//元素下子元素的所有点击事件解绑

 

阻止事件冒泡,在方法里添加return false

 

.show(time,func);//显示元素

.hide(time,func);//隐藏元素

 

.stop();//停止当前动画后再执行,如.stop().show,频繁切换的时候防止还没结束就显示

 

.children("ul");//获取元素下的ul

 

.text();//相当于innerText属性//获取文本内容

.text;("值")//设置值

 

.html();  //相当于innerHTML,获取HTML内容

.html("node");//可以创建标签,会覆盖原来的内容 

 

.index()//当前元素的索引值

 

$("ul").find("li");//在ul中找到所有的li

$("li").siblings("li");//获取该li的所有li兄弟节点

$("li").prev();//该li的前一个元素

$("li").prevAll();//该li的前面所有兄弟元素

$("li").next();.nextAll;//同上

$("li").parent();//获取li的父元素

 

.end();//自动修复断链(回到上一个this)

andself().css(...);//除了当前,还往上找this,一起执行后面方法

 

 

动画的相关方法:

slideUp(time,func);//滑入和show(),hide()一样

slideDown(time,func);//滑出

slideToggle(time,func);//滑入滑出切换

fadeIn(time,func);//淡入

fadeOut(time,func);//淡出

fadeToggle(time,func);//淡入淡出

animate({},time,func);//动画函数,传入要改变的参数对象,和时间

 

父.append(子);//追加入一个元素

子.appendTo(父);//

父.prepend(子);//把子加到父的第一个子元素前面

子.prependTo(父);//

元素.after(待加入元素);//在元素后加入

.before();前

 

.empty();//清空父元素中的子元素内容

.remove();//清空调用的该元素

 

 

 <div id="text" value="123"  data-name="黑哒哒的盟友"><div>

 $("#text").data("name");

.attr("key","val");//设置自定义属性key值为val

.attr("key");//获取自定义属性key的值

.prop("key","val");//用来设置checked选中状态

.prop("key")'//同上

 

.width();

.height();

.offset({});//返回对象,有left,top属性,获取或者设置元素的top和left值,包括margin

 

.scrollTop();//获取元素向上卷曲出去的距离

.scrollLeft();//获取元素向左卷曲出去的距离

 

循环遍历:

each(func(index,obj){

...//注意obj不是jquery对象,要$(obj)转为jquery对象才能使用jquery的方法

})

 

.delay(1000).xxx,延时1s执行xxx

 

 

x.trigger("click")//手动触发一次x的click事件

 

1. 判断option是否被选中

$("#id").is(":checked")  //false代表未选中，true代表选中

2. 获取select选中的值

$("#mySelect option:selected").text()$("#mySelect").find('option:selected').text()$("#mySelect").val()

3. 获取select选中的索引

$("#mySelect").get(0).selectedIndex

4. 删除option

$("#myOption").remove()

 

 

 

Day1:

 

dom和jQuery对象互相转换

隐式迭代

 

选择器总结:

:eq(index)//索引选择器,获取对应索引的元素

各行变色:odd,:even

列表显示隐藏

链式编程,列表高亮显示

淘宝精品广告案例:

效果图:

DAY2:

索引选择器:

高亮显示效果:

效果:

获取元素的兄弟元素,父元素

.end();

tab切换:index的使用

 

动态创建列表添加数组中的元素:

DAY3:

节点创建的一些方法:

全选全不选,选择

attr();//自定义属性

全选全不选

元素卷曲出去的距离:

delegate();//代理

为元素绑定事件的三种方式:

 

delegate绑定的事件是通过代理的方式,先绑定事件后添加元素,该元素也可以触发

delegate里面通过on方法绑定的事件处理,也可以直接调用on方法,但是参数循序不一样

 

 

绑定事件总结:

 

触发事件的方法:

1. 直接调用

1. .trigger("事件");
2. .triggerHandler("事件");//无法触发浏览器的默认行为

 

链式编程原理:调用方法后,返回当前对象,可以继续调用该对象的方法

    return this;

 

18.五角星评分案例:

 

 

多库共存,让权

var xy = $.noConflict();//把$符号变成xy,防止冲突

 

包装集

$("p").length();

 

元素的宽高等方法:

 

获取元素的宽高

 

选择文件回显到页面

$("input").change(function(){

 

 

  var files = this.files;

 

 

  if(!files.length) {

 

 

    return;

 

 

  }

 

 

  $("img").attr("src", window.URL.createObjectURL(files[0]));

 

 

});