例子
$(function () {
var $btn=$("#btn");
$btn.click(function () {
alert("asd")
})
})
window.onload=function () {
var a=document.getElementById("btn");
a.onclick=function () {
alert("asd")
}
}
二:$是JQuery的核心函数,能完成很多功能,$()就是调用这个函数
1,传入参数为函数时,表示页面加载完成后之后
$(function () {
})
2,传入参数为HTML字符串时,根据这个字符串创建元素节点对象
$(function () {
$("<button></button>").appendTo("body");
})
3,传入参数为选择器字符串时,
$("#id属性值"),id选择器,根据id查询标签对象
$("标签名"),标签名选择器,根据标签名查询标签对象
$(".class属性值"),类型选择器,根据class属性查询标签对象
$(function () {
var a=$("#btn");
a.click(function () {
alert("asd");
})
})
4,传入参数为DOM对象时,会把这个dom对象转化为JQuery对象
$(function () {
var one =document.getElementById("btn");
alert( $(one));
})
三:JQuery对象和dom对象区分
DOM对象:
1,通过getElementById查询出来的是DOM对象
2,通过getElementByName查询出来的是DOM对象
.......
JQuery对象:
1,通过JQuery提供的API创建的对象,是JQuery对象
2,通过JQuery包装的DOM对象,是JQuery对象
3,通过JQuery提供的API查询的对象,是JQuery对象
JQuery对象的本质:JQuery对象是DOM对象的数组+JQuery提供的一系列功能函数
四:JQuery对象和DOM对象的互换
DOM对象转JQuery对象
1,先有DOM对象
2,$(DOM对象)
JQuery对象转DOM对象
1,先有JQuery对象
2,JQuery对象[下标]取出相应的DOM对象
$(function () {
var one =document.getElementById("btn");
var two=$(one);
alert(two);
var three=two[0];
alert(three);
})
五,层级选择器
后代选择器:给定祖先元素下匹配所有的后代元素
例:
body元素里面的input元素
$("body input")
子元素选择器:给定父元素下匹配所有子元素
例:
body元素里面的input元素
$("body>input")
相邻元素选择器:匹配所有紧接在prev元素后的next元素
例:
匹配input元素后面的button元素
$("input+button")
之后的兄弟元素选择器:匹配prev元素之后的所有siblings元素
例:找到和input同辈的button属性
$("input~button")
六:属性操作
html():可以设置和获取起始标签和结束标签中的内容==dom属性innerHTML
text():可以设置和获取起始标签和结束标签中的文本==dom属性innerText
val():可以设置和获取表单项的value属性值==dom属性value
$(function () {
var one=$("#btn");
one.html("asdasd");
alert(one.html());
})
attr():可以设置和获取属性的值。不推荐操作checked,readOnly,selected,disabled.....
prop():可以设置和获取属性的值。只推荐操作checked,readOnly,selected,disabled.....
$(function () {
var one=$("#btn");
alert(one.attr("value"));//获取
one.attr("value","btn");//设置
alert(one.attr("value"));
})
七,事件
$(function () {})和window.onload=function(){}的区别:
分别在哪时候触发:
1,JQuery的页面加载完成之后是浏览器内核解析完页面的标签创建好DOM对象之后就会马上执行
2,原生js的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM对象,还要等标签显示时需要的内容加载完成
执行次数:
1,原生js的页面加载完成之后,只执行最后一次的赋值函数
2,JQuery的页面加载完成之后,按顺序把全部注册的function函数执行
常用事件处理方法:
click():可以绑定单击事件,以及触发单击事件
mouseover():鼠标移入事件
mouseout():鼠标移出事件
bind():可以给元素一次性绑定一个或者多个事件
$(function () {
$("#btn").bind("click mouseover mouseout",function () {
console.log("asd");
})
})
unbind():跟bind()的操作相反,解除事件的绑定
$("#btn").unbind("click");//注意,如果不传入参数,则全部解除全部事件
one():使用方法跟bind()一样。但是one绑定的事件只会触发一次
live():用来绑定事件,可以用来绑定选择器匹配的所有元素事件。哪怕这个元素是后面动态创建出来也有效
事件的冒泡:
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素里去响应
解决方法:子元素方法 return false
获得事件的对象:
$(function () {
$("#btn").bind("click mouseover mouseout",function (event) {
if(event.type=="click"){
}else if(event.type=="mouseover"){
}else if(event.type=="mouseout"){
}
})
})