目录
1. jQuery操作DOM
1.基本操作
1.html()
作用：获取或设置jQuery对象的HTML内容，等同于innerHTML
ex:
var $div = $("#main");
console.log($div.html());
$div.html("动态设置的文本");
2.text()
作用：纯文本内容
等同于：innerText
3.val()
作用：获取或设置表单控件的value值
等同于：value
<input type="text" id="uname">
<button onclick="btnShow()">显示</button>
<div id="uname-show"></div>
<script src="jquery-1.11.3.js"></script>
<script>
function btnShow(){
$("#uname-show").html("<h1>"+$("#uname").val()+"<h1>");
}
</script>2.属性操作
1.attr()
作用：读取或设置jQuery对象的属性值
ex:
1.$obj.attr("id");
获取$obj对象的id属性值
2.$obj.attr("id","container")
设置$obj对象的id属性值为container
2.removeAttr("attrName")
作用：删除jquery对象的attrName属性
ex:
$obj.removrAttr("class");
3.样式操作
1.attr("class","className")
使用attr()绑定className值到jq对象的class属性上
2.addClass("className")
作用：追加className选择器到jq对象的class属性后
返回值：jq对象
<div id="obj"></div>
var $obj = $("#obj")
$obj = $obj.addClass("c1");
结果:<div id="obj" class="c1"></div>
$obj = $obj.addClass("c2");
结果:<div id="obj" class="c1 c2"></div>以上两个操作，可以简化为：
$obj.addClass("c1").addClass("c2");
(连缀调用)
$obj.addClass("c1").addClass("c2").html();
$("#uname-show").addClass("red").addClass("orangeBack").html("<h1>"+$("#uname").val()+"<h1>");3.removeClass("className")
作用：将className属性值从class属性中移除
4.removeClass()
作用：清空class属性值
5.toggleClass("className")
切换样式:
元素如果具备className属性值，则删除
元素如果没有className属性值，则添加
6.css("css属性名")
作用:获取对应css属性的值
ex:
$obj.css("css属性名")
作用：获取$obj对象的CSS属性值
7.css("css属性名","css属性值")
作用：为元素设置css属性值
8.css(JSON对象)
JSON对象 类似于 PYTHON中字典的写法
ex:
$obj.css({
"color":"red",
"background-color":"orange"
})
4.遍历节点
1.children() / children(selector)
作用：获取jq对象的所有子元素或带有指定选择器的子元素
注意：只考虑子代元素，不考虑后代元素
2.next() / next(selector)
作用：获取jq对象的下一个兄弟元素/满足selector的下一个兄弟元素
3.prev() / prev(selector)
作用：获取jq的上一个兄弟元素/满足selector的上一个兄弟元素
4.siblings() / siblings(selector)
作用：获jq对象的所有兄弟节点/满足selector的所有兄弟
5.find(selector)
作用：获取满足selector选择器的所有后代元素
6.parent()
作用：查找jq对象的父元素
5.创建元素 & 插入元素
1.创建元素
语法：var $obj = $("创建的内容");
注意：创建的内容必须是标记
ex:
1.创建一对div
var $div = $("<div id="xxx">xxxx</div>");
2.创建一对button
var $btn = $("<button></button>");
$btn.attr("id","btnDelete");
$btn.html("删除");
2.插入元素
1.内部插入
1.$obj.append($new);
将$new元素插入到$obj中最后一个子元素位置处
2.$obj.prepend($new);
将new元素插入到$obj中第一个子元素的位置处
2.外部插入
作为兄弟元素插入到网页中
1.$obj.after($new);
将$new作为$obj的下一个兄弟节点插入到网页中
2.$obj.before($new);
将$new作为$obj的上一个兄弟节点插入到网页中
2.jQuery中的事件处理
1.DOM加载完成后的操作
1.$(document).ready(function){
//DOM树加载完毕后要执行的操作
//相当于是页面初始化
});
2.$().ready(function(){
//效果同上
});
3.$(function(){
//效果同上
});
// DOM树加载完毕时就调用的内容
// 适合做：网页初始化的操作
$(function(){
$("#uname").val("请输入用户名");
});
2. jQuery事件绑定
1.方式1
$obj.bind("事件名称",事件处理函数);
ex:
$obj.bind("click",function(){
});
2.方式2
$obj.事件名称(function(){
});
ex:
$obj.click(function(){
xxxx
});
常用事件
// fn 是 function()
$obj.click(fn);
$obj.mouseover(fn);
$obj.mousemove(fn);
$obj.mouseout(fn);
$obj.keydown(fn);
$obj.keypress(fn);
$obj.keyup(fn);
$obj.focus(fn);
$obj.blur(fn);
$obj.change(fn);
$obj.submit(fn);3.事件中的this
在jquery事件中，this表示的就是触发当前事件的DOM对象
4.事件对象 - event
在绑定事件的时候，允许传递 event 参数来表示事件对象
1.$obj.bind("事件名称",function(event){
event 表示的就是事件对象
})
2.$obj.事件名称(function(event){
event 表示的就是事件对象
});
event的使用方式与原生JS事件中的事件对象一致
1.事件源
event.target
2.鼠标事件
event.offsetX:在元素上的横坐标
event.offsetY:在元素上的纵坐标
3.键盘事件
event.which:键位码或ASCII码
5.激发事件操作
$obj.事件名称();
ex:
$obj.click();//触发$obj的click事件
$obj.click(function(){}),//为$obj绑定click事件
3.jQuery删除节点
1.remove()
语法:$obj.remove();
作用:删除$obj元素
2.remove("selector")
语法:$obj.remove("selector");
作用:将满足selector选择器的元素删除
3.empty()
语法：$obj.empty();
作用：清空 $obj 内容
4.jQuery 遍历操作
方法:each()
1.循环遍历jQuery数组
$obj.each(function(i,obj){
i:循环出来的元素的下标
obj:循环出来的元素(DOM元素)
});
2.循环遍历JS数组(原生)
1.将原生数组通过$()转换成jQuery数组
2.
$.each(原生数组,function(i,obj){
i:遍历出来的下标
obj:遍历出来的元素
});
5.jQuery动画
1.基本显示/隐藏
$obj.show() / $obj.show(执行时长);
$obj.hide() / $obj.hide(执行时长);
2.滑动式显示 / 隐藏
$obj.slideDown() / $obj.slideDown(执行时长);
$obj.slideUp() / $obj.slideUp(执行时长);
3.淡入淡出式显示/隐藏
$obj.fadeIn() / $obj.fadeIn(执行时长);
$obj.fadeOut() / $obj.fadeOut(执行时长);
6.jQuery插件
1.下载插件并引入(jquery,插件文件,css文件)
2.结合当前网页修改css
3.去插件中修改数据(替换图片/图片名称)