jquery查找元素,绑定事件,DOM操作

通过元素之间的关系来获取对应的元素

找到元素的父元素

$("#a").parent().css("background","yellow");

找到祖先元素

$("#a").parents().css("background","pink");

指定找到某个祖先停止不包括指定那个祖先元素

$("#").parentsUntil("#a1").css("background","cyan");

子元素

$("body").children().css("background","red");

后代元素

$("body").find("*").css("background","#008000");

向前查找相邻兄弟元素

$("#a").prev().css("background","white");

向前查找所有兄弟元素

$("#a").prevAll().css("background","gold");

向前查找兄弟元素,知道某个元素停止,不包含指定的那个元素 

$("#a").prevUntil("#a1").css("background","purple");

向后查找相邻兄弟元素

$("#a").next().css("background","burlywood");

向后查找所有兄弟元素

$("#a").nextAll().css("background","grey");

向后查找兄弟元素,知道某个元素停止,不包含指定的那个元素

$("#a").nextUntil("#a3").css("background","#D6E9C6”); 

查找所有的兄弟元素

$("#a").siblings().css("background","white");

加载事件---页面加载完成触发  

window.onload = function(){

alert("页面加载完成1");

  }

$(document).ready(function(){

alert("页面加载完成2");

});

写法2

$(function(){

alert("页面加载完成3");

})

window.onload 和 $(document).ready的区别是？

window.onload不仅要等到网页上的元素加载完成,还要等待外部文件加载完成

而$(document).ready 只需要等到网页上的元素加载完成,就能执行

鼠标事件 

1,点击

$("#button").click(function(e){
 vareven=e||event;

console.log("鼠标点击");

});

按下

$("#button").mousedown(function(){

console.log("鼠标按下");

});

松开

$("#button").mouseup(function(){
 console.log("鼠标松开");

});

双击

$("#button").dblclick(function(){
 console.log("鼠标双击");

});

鼠标移入

$("#button").mouseenter(function(){

console.log("鼠标移入1");

});

$("#button").mouseleave(function(){

console.log("鼠标移出1");

});

$("#button").mouseover(function(){
 console.log("鼠标移入2");

});

$("#button").mouseout(function(){

 console.log("鼠标移出2");

});

键盘事件

键盘按下

$(document).keydown(function(){
 console.log("键盘按下");

});

松开键盘

$(document).keyup(function(){
 console.log("键盘松开");

});

按键盘

$(document).keypress(function(){
 console.log("按键盘");

});

表单事件

获取焦点事件

$("#text").focus(function(){
 console.log("获得焦点");

});

失去焦点

$("#text").blur(function(){
 console.log("失去焦点");

});

内容改变

$("#text").change(function(){

 console.log("内容改变");

});

选中内容

$("#text").select(function(){

 console.log("选中内容");

});

提交表单

$("#form").submit(function(){
 console.log("表单被提交");

});

滚动事件

$(document).scroll(function(){
 console.log($(document).scrollTop());

});

解除事件

off(解除的事件类型)

$("#button").off("click mouseover");

一次性事件

$("#button").one("click",function(){
 console.log("这是一次性事件");

});

1,创建元素并添加元素

varp="<p>Hello, World!</p>";

$(A).append(B),  在A元素的内部的尾部添加B

$("body").append(p);

vara="<a href='http://www.baidu.com'>百度首页</a>";

$(A).appendTo(B),  把A元素添加到B元素内部的尾部

$(a).appendTo(document.body);

$(a).appendTo("body");

创建一个p元素
varp1="<p>你好,世界!</p>";
$(A).prepend(B);   在A元素内部的前面添加B
$("body").prepend(p1);

vara1="<a href='http://www.qq.com'>腾讯</a>";
$(A).prependTo(B);   把A元素添加到B元素的内部的前面
$(a1).prependTo(document.body);
$(a1).prependTo("body");

varp2="<p>Hi</p>";
$(A).after(B)   在A元素外部的后面添加B元素
$("body").after(p2);

vara2="<a href='http://www.sina.com.cn'>新浪</a>";
$(A).insertAfter(B)   把A元素添加到B元素的外部的后面
$(a2).insertAfter(document.body);
$(a2).insertAfter("body");

varp3="<p>good afternoon</p>";
//$(A).before(B)   在A元素外部的前面添加B元素
$("body").before(p3);

vara3="<a href='http://www.sohu.com'>搜狐</a>";
//$(A).insertBefore    把A元素添加到B元素的外部的前面
$(a3).insertBefore("body");

删除元素
//remove()
$("p:eq(0)").remove();
//detach()
$("a:eq(0)").detach();
//empty()   清空元素内的所有内容
//$("body").empty();

//remove  和 detach的区别 

//remove 会移除元素和元素关联的事件
//detach 只会移除元素

$("#btn").click(function(){
alert("123123");
});

遍历节点
$("strong").each(function(i,e){

//i  下标  从0开始

//e  元素
console.log(i,e);
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
// e.style.color = "rgb("+r+","+g+","+b+")";
// $(this).css("color","rgb("+r+","+g+","+b+")");
$(e).css("color","rgb("+r+","+g+","+b+")");

});

有一个变量存储被移除的元素
vare=$("#btn").detach();
$("body").append(e);

复制元素
clone(是否复制事件),true 复制事件 , false 不复制事件

varf=$(".btn").clone(true);
$("body").prepend(f);

替换元素
$(A).replaceWith(B)  用B元素替换A元素
$("#btn").replaceWith("<p>替换</p>");
$(A).replaceAll(B)  用A元素替换B元素
$("<p>呵呵</p>").replaceAll(".btn");

包裹元素
$(A).wrap(B)  用B元素包裹每一个A元素
$("strong").wrap("<em></em>");

$(A).wrapInner(B), 用B元素包裹每一个A元素里的内容
$("strong").wrapInner("<em></em>");