1.入口函数
-`$(function () {} )`
-`$(document).ready(funtion ())`
-`$().ready(funtion ())`
注:一个页面可以写多个入口函数。
2.jquery对象和dom对象
1.jquery只能调用jquery对象里面的API,dom 对象只能调用dom 对象里面的属性API
2.jquery可以转换成dom对象,然后调用dom对象里面的属性或者api
-第一种转换方式:`$dom[0]`
-第二种转换方式:`$dom.get(index)`
3.dom对象转换成jquery对象,然后就可以调用jquery里面的属性及API
-`var $dom=$(dom)`
3.选择器
1.基本选择器
-id选择器 ------ 以#开头,例:`$('#id')`
-class选择器------以 . 开头,例:`$('.class')`
-标签选择器------以标签名开头,例:`$('div')`
-交集选择器------例:`$('li.item')` //获取所有li,并且他的class值是item
-并集选择器-----例:`$(div,p)` //获取所有的div及p
2.过滤选择器
-$("div:first") 第一个div元素
-$("div:last") 最后一个div元素
-$("li:first-Child") li的第一个子元素
-$("li:even") 所有偶数的li元素
-$("li:odd") 所有奇数的li元素
-$("li:eq(3)") li标签的第3个元素
3.属性操作器
-$("input[type]") 所有input带有 type 属性的元素
-$("input[type=button]") 所有input 带有type属性的值等于 "button" 的元素
-$("input[type^=but]") 所有input带有type属性的值以 "but" 开头的元素
-$("div[class$=tiv]") 所有div带有class属性的值以 "tiv" 结尾的元素
-$("div[class*=active]") 所有div带有class属性的值只要包含 "active" 的元素
4.jquery动画
1.show() hide() 显示隐藏
2.fadeIn() fadeOut() 淡入淡出
3.slideUp() slideDown() 向上卷曲,向下展开
4.fadeTo() 透明度 底层操作是:opacity
5.自定义动画:animate
1.第一个参数:形成动画的CSS属性(必要)
2.第二个参数:动画的时长,可选值:“slow”,“fast ” 或者毫秒
3.第三个参数:动画完成后执行的函数 (可选)
5.事件绑定
1.直接在当前元素上面添加一个事件方法 click() mouseover() 来绑定事件
2.bind("click mouseover",function(){})
3.delegate("p","click",function(){})
4.on("click","p",function(){})
总结:
click() 不加参数可以触发当前元素上面的点击事件
bind 可以给当前元素绑定多个事件
delegate 只能给子元素委派事件,可以委派多个事件
on 可以给当前元素自己绑定事件
也可以给当前元素下面的子元素委派事件
6.拓展
1.多库共存:因为一个页面可能用到多个框架,其他框架也有$这个对象,就会跟jquery的$冲突。
解决方法:通过jQuery.noConflict()交还$和jQuery对象的控制权,解决命名控件冲突的问题
2.拓展jquery方法:$.fn.countdown 为扩展jquery方法,函数名为countdown