替换与创建节点
jQuery 旧.replaceWith(新)
新.replaceAll(旧)
$p = $("新来的
"); //创建节点
clone节点
克隆节点原生与jquery区别
原生==>节点.cloneNode() true 克隆当前节点及其后代节点
jQuery ==>clone(true|false) true 克隆事件
包裹节点
// wrap()
$("button:eq(0)").click(function(){
// 把匹配到每一个span标签用p标签包裹起来
$("span").wrap("");
})
// unwrap()
$("button:eq(1)").click(function(){
// 把匹配到每一个span标签的父节点去除掉
$("span").unwrap();
})
$("button:eq(2)").click(function(){
$("span").wrapAll("");
})
//wrapInner()
$("button:eq(3)").click(function(){
$("span").wrapInner("");
})
遍历DOM树
$("ul:first>li").wrapInner("");
父子关系
// 01 children() 获取匹配到每一个节点的子节点
console.log( $("ul").children() );
// 02 parent() 获取父节点
console.log( $("li").parent() );
// 03 parents() 获取祖先节点
console.log( $("li").parents() );
// $("li").parents("selector") 起点 父节点
// 表格操作 $(this).parents("tr")
// 04 closest("筛选条件") 起点 当前节点
console.log( $("li:first").parents(".test") );//ul
console.log( $("li:first").closest(".test") );//li
// 兄弟关系
// 01 前一个兄弟 prev()
console.log( $("#test").prev() );
// 02 前面的兄弟 prevAll()
console.log( $("#test").prevAll() );
// 03 后一个兄弟 next()
console.log( $("#test").next() );
// 04 后面的兄弟 nextAll()
console.log( $("#test").nextAll() );
// 05 所有兄弟 siblings()
console.log( $("#test").siblings() );
// find("筛选条件")
// 把匹配到每一个元素的后代在进行一次筛选
console.log( $("ul").find("#test") );
事件对象
$("button").on("click",function(event){
// 事件对象常用的属性
//01 event.type获取事件类型
console.log( event.type );
//02 event.target 获取触发事件的元素
console.log( event.target );
//03 event.preventDefault();
//04 event.stopPropagation()
// event.stopPropagation();
//05 event.pageX evene.pageY
//06 event.which 左中右123
alert("btn");
})
$("body").mousedown(function(event){
// alert("body");
// console.log(event.pageX,event.pageY);
console.log(event.which);
if (event.which==3) {
}
})
$(document).keydown(function(event){
console.log(event.which)
})
添加事件与移除事件
// on ()
// 01 形式1 on(事件名,响应函数)
// $("div").on("click",function(){
// console.log("点我！");
// })
//02 形式2 给多个事件添加同一个响应函数
// $("div").on("mouseover click",function(){
// console.log("over and click");
// })
// 03 形式3 一次性添加多个事件的响应
// $("div").on({
// "click":function(){console.log("click");},
// "mouseover":function(){console.log("mouseover");},
// "mouseout":function(){console.log("mouseout");}
// })
//链式语法
// $("div").on("click",function(){console.log("click");})
// .on("mouseover",function(){console.log("mouseover");})
// .on("click",clickHandler);
// function clickHandler(){
// console.log("click222222222");
// }
// 04 形式4 可以向响应函数中传参
// 100 Number 传参一般传字面量对象
$("div").on("click",{"msg":"哈哈"},function(event){
//事件对象 event.data
console.log(event.data);
})
on(this,"click",1,fn)
// off()
// 01 移除所有事件
// $("div").off();
// 02 移除点击事件 off(事件名)
// $("div").off("click");
// 03 移除某一个响应函数
// $("div").off("click",clickHandler);
//拖拽
// div 鼠标移入 背景色变成红色 离开变成蓝色
// $("div").on("mouseover",overhandler)
// .on("mouseout",function(){
// $(this).css("background-color","blue");
// })
// function overhandler(){
// $(this).css("background-color","red");
// }
// 点击按钮1 取消移入事件
bind()
// bind
$("button").bind("click mouseover",function(){
console.log("点击了按钮");
})
// unbind
$("button").unbind("mouseover");
$("li").on("click",function(){
$(this).css("background-color","orange");
$(this).siblings().css("background-color","#fff");
})
ready()事件
// window.load 事件 页面加载完毕之后会触发
// window.onload=function(){
// //可以获取div
// }
// window 与 document的关系 document是window的对象属性
$(document).ready(function(){})
$(function(){})//简写
load事件与ready事件的区别
load 是指页面中所有的元素加载完毕(所有的文件图片都下载完毕)之后才会触发；
ready是指DOM元素加载完毕之后就会触发，此时文件图片不一定下载完
事件简写(点语法)
$(function(){
//coding...
// $("div").click();
$("#user").focus(function(){
$(".tips").html("1.必须由字母、数字、下划线组成2.不能以数字开头3 长度需要在6-16之间");
$(".tips").css("display","inline-block");
$(".tips").css("color","black");
}).blur(function(){
if(/^[a-z_]\w{5,15}$/i.test(this.value) ){
$(".tips").html("输入正确");
$(".tips").css("color","green");
}else{
$(".tips").html("输入错误");
$(".tips").css("color","red");
}
});
});
合成事件(hover())
$(function(){
//hover 是mouseover与mouseout的合成
$("div").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","green");
})
})
事件对象
$("button").click(function(event){
//event 就是事件对象
// stopPropagation() 阻止冒泡
// 什么是事件冒泡？
// event.stopPropagation();
// preventDefault() 阻止默认行为
// 提交按钮
// 点击链接跳转
// target 触发事件的元素
console.log( event.target );
console.log("button!");
//pageX pageY 获取鼠标在页面坐标系中的坐标点
})
$("body").click(function(event){
console.log("body!");
console.log( event.target );
console.log( event.pageX,event.pageY);
// which
// 在鼠标事件中获取的鼠标的键 左滚右（1,2,3）
// 在键盘事件中获取的按下的键
})
$("body").mousedown(function(event){
console.log(event.which);
})
$(document).keydown(function(event){
console.log(event.which);
})