一、jQuery 是一个js的类库。
write less do more;
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="../js/jquery-1.11.0.min.js"></script>
二、js原生aip封装：
function get(partten){
if(partten以#打头){
return document.getElementById("id值");
}else if(partten以.打头){
return document.getElementsByClassName("标签的class属性名字")
}
}
三、dom和jquery相互转换：
原生的dom对象
就是调用原生的api 获取元素 称之为原生的dom对象
jquery对象
使用jquery的方法 获取的元素而是一个经过封装的对象
jquery对象-->dom对象
var dom对象=jquery[数字类型的属性名];
dom对象-->jquery对象
var jquery对象=$(dom对象);
var $jquery对象=$(dom对象);
往用jquery获取的元素 前面加$的前缀也可以
四、页面加载：
原本的onload加载会覆盖前面的
//原生api 使用页面加载完成
onload=function(){
alert("同事1写的逻辑")
}
onload=function(){
alert("同事2写的逻辑")
}
/////////////////////////////////////////////////////
方式一
$(document).ready(function(){
js逻辑
})
方式二
$(function(){
js逻辑
})
五、事件绑定:
原生的：
方式一
<xxx 事件名="方法名()">
方式二:
<xxx id="x">
document.getElementById("x").onclick=function(){
...
}
jquery封装好的:
$("选择器").click(function(){
....
})
六、常见事件：
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
var i=0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
$("#divMsg").html("鼠标移动：mousemove,"+ i++);
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
七、效果：
回调函数：把一个方法作为参数 传给了另外一个方法
$("#b1Div").toggle(2000,function(){
alert("xxx方法执行了...")
});
隐藏与显示
$("选择器").hide(毫秒值);
$("选择器").show(毫秒值)
$("选择器").toggle(毫秒值)
滑入和滑出
slideUp(毫秒值)
slideDown(毫秒值)
slideToggle(毫秒值);
淡入和淡出
fadeIn()
fadeOut()
fadeToggle();
八、jquery选择器：
id选择器 #id
class选择器 .class的名字
标签选择器 标签的名字
所有选择器 *
分组选择器 选择器1,选择器2.....
属性选择器 [属性名='属性值']
层级选择器:
a b :a选择器中的b 孩子们(孙子辈)
a>b :a选择器中的b 儿子们
a+b :a的b的大弟弟(第一个)
a~b :a的b的弟弟们
过滤选择器:
:first
:last
:eq(index)
:lt(index) less than 小于
:gt(index) greate than 大于
:odd 奇数
:even 偶数
内容过滤选择器：
父选择器:has(子选择器);
属性选择器：
$("div[title]") 含有属性
$("div[title='test']") 属性值等于
$("div[title^='t']") 属性值以x打头
[title$='t'] 属性值以x结尾
[title*='t'] 属性值包含x
表单选择器:
:text 选中普通文本输入框
:radio 选中的就是单选框
:input 选中所有form的子标签 input textarea select button
input 标签选择器
九、改变元素：
attr("属性名")//获取
attr("属性名","属性值")//设置
css("属性名")//获取
css("属性名","属性值")//设置
addClass 只操作class属性
removeClass 只删除class属性
