Jquery常用的方法汇总
作者：bea
//jQuery的优点 : 1 轻量级 2 强大的选择器 3 出色的DOM操作的封装 4 可靠的事件处理机制 5 完善的Ajax 6 不污染顶级变量 7 出色的浏览器兼容性 8 链式操作方式 9 隐式迭代 10 行为曾与结构层的分离 11 丰富的插件支持 12 完善的文档 13 开源 <script src="jquery.js" type="text/javascript">这里不许放任何代码</script> $("
//jQuery的优点 :
1 轻量级 2 强大的选择器 3 出色的DOM操作的封装 4 可靠的事件处理机制 5 完善的Ajax 6 不污染顶级变量 7 出色的浏览器兼容性 8 链式操作方式 9 隐式迭代 10 行为曾与结构层的分离 11 丰富的插件支持 12 完善的文档 13 开源
<script src="jquery.js" type="text/javascript">这里不许放任何代码</script> $("#foo")和 jQuery("#foo")是等价的 $.ajax 和 jQuery.ajax 是等价的 $符号是jQuery的简写形式
// window.onload : $(function(){ }) $(function(){ }) 就相当于 js 中的window.onload事件一样,是在页面加载完成后,立刻执行的 只有这个和window.onload一样 不过window.onload只能写一个 但是$(function(){ })可以写多个 没有简写的时候是 $(document)ready(function(){ })
//链式操作风格 :
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象 var cr = $[0]; //DOM对象
2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象 var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了. 方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象 var $cr = $(cr); //jQuery对象
//解决冲突 :
1 如果其他JS库和jQuery库发生冲突,我们可以在任何时候调用 : jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 可以直接使用"jQuery"来做一些jQuery的工作
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery选择器
1 基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,他通过元素id、class 和 标签名 等来查找DOM元素
//jQuery :
只要获得标签对象 . 就是数组
//jQuery对象获取 :
$("p");//获取所有p标签对象 ---- 获取的对象是数组 $("#aa");//获取id为aa的那个标签的对象 --- 获取的对象是数组 $(".aaa");//获取class为aaa的那个标签的对象 --- 获取的对象是数组
//jQuery对象和DOM对象的转换 :
jQuery的方法和DOM的方法不能互相使用(调用),但是对象可以互相转换 $("p");//是jQuery对象 document.documentElementsTagName("p");//是DOM对象 $(document.documentElementsTagName("p"));//把DOM对象转换成jQuery对象 $("p").get(1);//是一个DOM对象, get(1);代表p这个数组的第二位,(下标为1 就是第二位) $($("p").get(1));//是jQuery对象转成
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象 var $cr = $("#cr");//jQuery对象 var cr = $[0]; //DOM对象 2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象 var $cr = $("#cr");//jQuery对象 var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了. 方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象 var $cr = $(cr); //jQuery对象
//创建元素 :
$("<li title='其他'>123</li>");//创建<li>标签 属性为title=其他 内容为123 元素节点(标签名) 属性节点(属性 title='xxx') 文本标签(123)
//text()文本节点 :
text() : 函数/方法,是获得选定标签内部文本(人眼能够看到的内容) <li>123</li> var li = $("li").text();//获得了li的文本节点里面的数据(就是 123 这个内容)
//attr()获得属性/设置属性/更改属性 :
<p title="aaa"></p>;
var i = $("p").attr("title");//这是获得p标签里面的title属性的值 $("p").attr("title"," bbb");//把p标签里面的title属性的值 更改为bbb
//removeAttr() 删除指定元素的属性值 :
removeAttr(xx,xx);删除属性值 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").removeAttr('title',"你最不喜欢的");//就是把p标签里面的title属性的值,(你最不喜欢的)删除
//append()添加元素 :
将匹配到的子元素 添加到指定的父元素中. 函数的链式调用 : 为什么可以链式调用? 是因为前面的函数返回的仍然是调用的那个对象 如下面 a.append(b).append(c) a是个父标签对象,调用函数把b添加进去,并且返回的值,还是a的对象,所以还可以在调用函数,把c也添加进去
//a和b和c 都是标签的对象
var $li_1 = $("<li></li>");//只创建了元素节点 var $li_2 = $("<li></li>"); var $parent = $("ul");
$parent.append($li_1).append($li_2); a.append(b);//把 b 添加到 a 里面 的最后面(追加),a是父标签b是子标签 a.append(c);//把 c 添加到 a 里面 的最后面(追加),a是父标签c是子标签 a.append(b).append(c);//把b c 都添加到 a 里面 b 和 c 是同辈 只是b在c的上面 (链式的调用添加) a.prepend(b)//把 b 添加到 a 里面 的最前面 a是父标签 b是子标签 a.insertAfter(b);//把 a 添加到 b 的 后面(同辈的)
a.insertBefore(b);//把 a 添加到 b 的 前面(同辈的) //叫移动节点 //把我们指定元素插入匹配到元素的前面(指定的元素.insertBefore("匹配到的元素"))
//appendTo()添加元素 :
//a是对象 b是标签名 appendTo() : 是将制定元素添加到匹配的元素的集合中去
$("li").appendTo("ul");//把li标签添加到ul中 a.appendTo("b"); //是吧 b 添加到 a 的里面(a是标签 b是标签) 指定元素.appendTo(匹配元素);
//删除元素(是隐藏)remove() :
a.remove();//把 a 从html中删除(是隐藏) var $li = $("ul li:eq(1)").remove();//把ul 里面li标签的第二个删除 eq(1);就是下标为1的那个li元素 也就是第二个吧 因为下标从0开始 $li.appendTo("ul");//把刚才删除的元素重新加入到ul里面 $("ul li").remove("li[title !=苹果]");//把 ul 元素里面所有的 li 元素 title属性不是苹果的 都删除
//removeAttr() 删除指定元素的属性值 :
removeAttr(xx,xx);删除属性值 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").removeAttr('title',"你最不喜欢的");//就是把p标签里面的title属性的值,(你最不喜欢的)删除
//清空empty() :
$("ul li:eq(1)").empty();//找到ul里面第二个li元素 并把内容删除,(文本节点,<li>内容(文本节点)<li>)
//复制选定的节点clone() :
clone(true) : 复制节点,true的时候,节点绑定的事件监听也一起复制过去,不写默认为false
$("li").clone()//复制当前节点 $("li").clone().appendTo("ul");//复制li节点,并将它追加到ul中(是追加到 ul 的内部) $("li").clone(true).appendTo("ul");//复制li节点,并复制li绑定的事件监听,一起追加到ul中(是追加到 ul 的内部)
//替换选定的节点replaceWith(),replaceAll() :
a是被替换的那个对象 b是替换的那个完整标签 a.replaceWith(b);//b就会把a替换掉 (后面的 b 替换了前面的 a) 后面替换前面 b.replaceAll(a);//b把a替换掉 (前面的 b 替换后面的 a) 前面替换后面
//如果有多个p 就会都替换
$("p").replaceWith("<strong>你女朋友最不喜欢的水果是???</strong>");//把整个p标签都换了 换成了 <strong>你女朋友最不喜欢的水果是???</strong>
//如果有多个p 并且只想替换一个
$($("p").get(1)).replaceWith("<strong>你女朋友最不喜欢的水果是???</strong>");//只把第2个p标签替换了 也可以给想要替换的那个标签 加一个ID 就是只替换一个了 $("#abc").replaceWith("<li>我替换了id为abc的那个标签</li>")
//replaceAll() : $("<strong>你妈咪最不喜欢的水果是???</strong>").replaceAll("#abc");//前面的替换了后面的 替换了id为#abc的那个标签 $("<li>我替换了所有的p标签</li>").replaceAll("p");//前面替换了后面的
//包裹wrap() wraoAll() wrapInner() :
//wrap() :
wrap() : 给匹配 到的元素,包裹一个新的html标. a标签对象(被包裹) b是标签(用b标签包裹) 所有的 a标签 都会被包裹 a.wrap(b); //如果有一个a标签 就包裹成 : <b><a>我是a标签</a></b> //如果有多个a标签 就包裹成 : <b><a>我是a标签</a></b> <b><a>我是a标签</a></b> <b><a>我是a标签</a></b> 每个都是分开包裹的 不是一起包裹到一起 a.wrap("b");//就是给a添加了一个父标签 a被b包裹 <p>我是p标签</p> $("p").wrap("<i></i>");//给p标签添加一个父标签,就是用<i>标签把p标签包裹了 就成了<i><p>我是p标签</p></i> /* <i> <p>我是p标签</p> </i> */
//wrapAll() :
wrapAll():把标签都包裹到一起,就算要被包裹标签没在一起,中间有别的标签,也会吧那个要被包裹标签,都移到一起,在一起包裹 //包裹之前 <a>123</a> <p>aaa</p> <a>456</a> a.wrapAll(b);//全部包裹 //包裹之后 <b> <a>123</a> <a>456</a> </b> <p>aaa</p> 这样包裹之后,输出的位置就变了,效果也就变了
//wrapInner() :
wrapInner(): 将匹配标签中的内容,添加一个指定标签(相当于是给原标签添加一个子标签,并且保存的是父标签的文本内容) <a>123</a> : a.wrapInner("b");//结果就是 : <a><b>123</b></a> 用b标签 把a里面的内容括起来 <li title="苹果">苹果</li> $("li").wrapInner("<i></i>");//结果就是 : <li title='苹果'><i>苹果</i></li> <li title="苹果"> <i>苹果</i> </li>
//效果切换 toggleClass() :
是指的效果之间的切换,第一次没有切换的时候有一个效果,切换的时候,是指所有的class综合组成的那个效果 就是当前效果和指定的效果来回切换 <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <p class="high" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").toggleClass("another ");//其实是改class,当触发这个函数的时候,就等于是把another和height换了一下,上面设置了,当class是high的时候,是红色字体,当class是another的时候,是蓝色字体 所以,触发这个函数,就会变一次颜色,在触发一次,就在变一次,只不过是class之间的切换.是$("p").toggleClass("another")后面的class 和p标签里面原代的class进行切换
//判断元素是否包含某样式 hasClass() :
$("p").hasClass("MyClass");//判断p标签里面是否有个class的属性为MyClass $("p").is("MyClass");//和上面一样
//html()和text() :
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p> $("p").html();//就是p标签,两个标签(<p></p>)之间的内容,相当于是p的innerHTML,就是 : <strong>你最喜欢的水果是?</strong> $("p").text();//就是p标签里面的文本数据(文本节点),就是 : 你最喜欢的水果是?
//得到 失去 焦点 focus() blur() :
focus() : 得到焦点 blur() : 失去焦点 $("标签名(#ID名)(.class名)").focus(获取焦点需要执行的方法和语句function(){ 语句 操作}) $("标签名(#ID名)(.class名)").blur(失去焦点需要执行的方法和语句function(){ 语句 操作})
//获取/更改 value()值 defaultValue :
<input type="button" value="请输入账号"/> $("input").val();//这是获取value的值 $("input").val("账号是****");//这是更改value的值 结果就是 : <input type="button" value="账号是****"/>
//defaultValue : 代表value的默认值,就是编写代码的时候,设置value的值是什么,那defaultValue就是什么 一般用于判断 if (txt_value == ""){//意思是,如果value为空,就把开始的默认值再赋值给value 用于设置输入框,如果输入框没有输出东西,就还把默认的value值输入进去,(没得到焦点的时候,输入框里显示默认值,得到焦点后,设置去掉默认值,如果客户没有输入东西,还会给value把默认值赋值回去,用于提醒客户,没有输入东西) $("input").val($("input").defaultValue) }
//查看子元素的个数children() (只是子元素,子元素的子元素,不算,直接子元素才是子元素) :
$("标签").children(); 标签的jQuery对象.children(); <a> <b> <c></c> </b> <d></d> </a> $("a").children();//就是2 因为a的子元素只有b和d
$("b").children();//就是1 因为b的子元素只有c一个
$("d").children();//就是0 因为d没有子元素
//同辈元素,next(),prev(),siblings() :
next();//同辈的下一个元素 prev();//同辈的上一个元素 siblings();//所有的同辈元素 <b>123</b> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> <i>456</i>
// 例子 : next()
var p= $("p").next(); p.html();//p元素的同辈下一个元素的内容(就相当于innerHTML),结果就是 : <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> p的同辈的下一个标签是ul,<ul>这里就是html()的东西</ul> --------------------- // prev()
var p = $("p").prev(); p.html();//就是p的同辈元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123
123
---------------------- // siblings()
var p = $("p").siblings();//所有元素,现在是数组把 p.html();//这个,只是123,因为是数组,如果输出,输出第一个,所以就是b标签的内容就是123 要遍历才能看到所有内容 for(var i =0;p.length;i++){ alert(p[i].innerHTML);//这就是所有的内容,为什么用innerHTML? //因为p是jQuery对象吧,当jQuery对象,后面跟下标的时候,就是DOM对象了,所以只能用innerHTML.这个和jQuery对象的html()方法,功能是一样的, //alert();是个普通的弹框 //结果就是 : 123 你最喜欢的水果是? 苹果 橘子 菠萝 456 }
//事件委托机制 :
事件委托机制 : 我们要找到某个元素,改变其属性,但是这个元素我们不知道能不能找到,所以我们就用一个临时变量,把事件委托给他,然后去寻找元素,找到以后就把事件转交
// $(自定义变量.target).closest("要找的元素").css("找到之后的某一个属性","更改属性值") //这里从点击对象开始往上查询(如果点击的是a,就会先找a,在找span,再找p,再找body,一直除非找到正确的那个标签,就停止网上找了) $(document).bind("click",function(e){ $(e.target).closest("body").css("color","red"); }) //$(document).bind("click",function("p"){ // $("p").css("color","red"); // })
//document:代表整个文档,我要匹配文档中某一个不确定对象,用了这样一种形式 //e:是指我们要找的某个元素,他的是个不特定的值,$(e.target)是那个不特定的对象 //来自于我们不特定的匹配,匹配到谁就是谁 <body> <p title="选择你最喜欢的水果." > <span> <a title='苹果'>苹果</a> <a title='橘子'>橘子</a> <a title='菠萝'>菠萝</a> </span> </p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body>
//获取对象的左边距和上边距 offset() :
用法 : jQuery对象.offset(); jQuery对象.offset().left/top; var $p = $("p").offset();//获得p的左边距和上边距,是个数组 $p.left;//得到的值,就是左边距 $p.top;//得到的值,就是上边距
//设置坐标并显示,show() :
对象.css().show("slow(慢)"/"normal(正常)"/"fast(快)"); 三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000) $("#id").mouseover(function(e){ //e相当于原生js中的event //创建一个div元素,e触发的事件对象(mouseover),this代表触发的时候,事件源对象(指html标签) var tooltip = "<div id='tooltip'>" + this.title + "</div>"; $("body").append(tooltip); //追加到文档中 $("#tooltip").css({ "top":e.pageY + "px", "left":e.pageX + "px", "width":"300px" }).show("fast"); //设置x坐标和y坐标并且显示,这里的e,是当事件源触发这个事件的时候,事件和鼠标的相交的一个坐标,用这个坐标,表示这个框的左上角坐标 })
有用 | 无用
1 轻量级 2 强大的选择器 3 出色的DOM操作的封装 4 可靠的事件处理机制 5 完善的Ajax 6 不污染顶级变量 7 出色的浏览器兼容性 8 链式操作方式 9 隐式迭代 10 行为曾与结构层的分离 11 丰富的插件支持 12 完善的文档 13 开源
<script src="jquery.js" type="text/javascript">这里不许放任何代码</script> $("#foo")和 jQuery("#foo")是等价的 $.ajax 和 jQuery.ajax 是等价的 $符号是jQuery的简写形式
// window.onload : $(function(){ }) $(function(){ }) 就相当于 js 中的window.onload事件一样,是在页面加载完成后,立刻执行的 只有这个和window.onload一样 不过window.onload只能写一个 但是$(function(){ })可以写多个 没有简写的时候是 $(document)ready(function(){ })
//链式操作风格 :
$(".level1>a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show(); //下一个元素显示
.parent().siblings()//父元素的同辈元素
.children("a") //子元素<a>
.removeClass("current")//移出"current"样式
.next().hide();//他们的下一个元素隐藏
return false;
})
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象 var cr = $[0]; //DOM对象
2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr = $("#cr");//jQuery对象 var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了. 方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象 var $cr = $(cr); //jQuery对象
//解决冲突 :
1 如果其他JS库和jQuery库发生冲突,我们可以在任何时候调用 : jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库
var $jaovo = jQuery.noConflict();
$jaovo(function(){
$jaovo("p").click(function(){
alert($jaovo(this).text());
});
});
2 可以直接使用"jQuery"来做一些jQuery的工作
jQuery(function(){
jQuery("p".click(function(){
alert(jQuery(this).text());
}));
});
//jQuery选择器
1 基本选择器 基本选择器是jQuery中最常用的选择器,也是最简单的选择器,他通过元素id、class 和 标签名 等来查找DOM元素
//jQuery :
只要获得标签对象 . 就是数组
//jQuery对象获取 :
$("p");//获取所有p标签对象 ---- 获取的对象是数组 $("#aa");//获取id为aa的那个标签的对象 --- 获取的对象是数组 $(".aaa");//获取class为aaa的那个标签的对象 --- 获取的对象是数组
//jQuery对象和DOM对象的转换 :
jQuery的方法和DOM的方法不能互相使用(调用),但是对象可以互相转换 $("p");//是jQuery对象 document.documentElementsTagName("p");//是DOM对象 $(document.documentElementsTagName("p"));//把DOM对象转换成jQuery对象 $("p").get(1);//是一个DOM对象, get(1);代表p这个数组的第二位,(下标为1 就是第二位) $($("p").get(1));//是jQuery对象转成
//jQuery对象转成DOM对象 :
1 jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象 var $cr = $("#cr");//jQuery对象 var cr = $[0]; //DOM对象 2 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象 var $cr = $("#cr");//jQuery对象 var cr = $cr.get(0);//DOM对象
//DOM对象转成jQuery对象 :
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了. 方式为 : $(DOM对象);
var cr = document.getElementById("cr");//DOM对象 var $cr = $(cr); //jQuery对象
//创建元素 :
$("<li title='其他'>123</li>");//创建<li>标签 属性为title=其他 内容为123 元素节点(标签名) 属性节点(属性 title='xxx') 文本标签(123)
//text()文本节点 :
text() : 函数/方法,是获得选定标签内部文本(人眼能够看到的内容) <li>123</li> var li = $("li").text();//获得了li的文本节点里面的数据(就是 123 这个内容)
//attr()获得属性/设置属性/更改属性 :
<p title="aaa"></p>;
var i = $("p").attr("title");//这是获得p标签里面的title属性的值 $("p").attr("title"," bbb");//把p标签里面的title属性的值 更改为bbb
//removeAttr() 删除指定元素的属性值 :
removeAttr(xx,xx);删除属性值 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").removeAttr('title',"你最不喜欢的");//就是把p标签里面的title属性的值,(你最不喜欢的)删除
//append()添加元素 :
将匹配到的子元素 添加到指定的父元素中. 函数的链式调用 : 为什么可以链式调用? 是因为前面的函数返回的仍然是调用的那个对象 如下面 a.append(b).append(c) a是个父标签对象,调用函数把b添加进去,并且返回的值,还是a的对象,所以还可以在调用函数,把c也添加进去
//a和b和c 都是标签的对象
var $li_1 = $("<li></li>");//只创建了元素节点 var $li_2 = $("<li></li>"); var $parent = $("ul");
$parent.append($li_1).append($li_2); a.append(b);//把 b 添加到 a 里面 的最后面(追加),a是父标签b是子标签 a.append(c);//把 c 添加到 a 里面 的最后面(追加),a是父标签c是子标签 a.append(b).append(c);//把b c 都添加到 a 里面 b 和 c 是同辈 只是b在c的上面 (链式的调用添加) a.prepend(b)//把 b 添加到 a 里面 的最前面 a是父标签 b是子标签 a.insertAfter(b);//把 a 添加到 b 的 后面(同辈的)
a.insertBefore(b);//把 a 添加到 b 的 前面(同辈的) //叫移动节点 //把我们指定元素插入匹配到元素的前面(指定的元素.insertBefore("匹配到的元素"))
//appendTo()添加元素 :
//a是对象 b是标签名 appendTo() : 是将制定元素添加到匹配的元素的集合中去
$("li").appendTo("ul");//把li标签添加到ul中 a.appendTo("b"); //是吧 b 添加到 a 的里面(a是标签 b是标签) 指定元素.appendTo(匹配元素);
//删除元素(是隐藏)remove() :
a.remove();//把 a 从html中删除(是隐藏) var $li = $("ul li:eq(1)").remove();//把ul 里面li标签的第二个删除 eq(1);就是下标为1的那个li元素 也就是第二个吧 因为下标从0开始 $li.appendTo("ul");//把刚才删除的元素重新加入到ul里面 $("ul li").remove("li[title !=苹果]");//把 ul 元素里面所有的 li 元素 title属性不是苹果的 都删除
//removeAttr() 删除指定元素的属性值 :
removeAttr(xx,xx);删除属性值 <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").removeAttr('title',"你最不喜欢的");//就是把p标签里面的title属性的值,(你最不喜欢的)删除
//清空empty() :
$("ul li:eq(1)").empty();//找到ul里面第二个li元素 并把内容删除,(文本节点,<li>内容(文本节点)<li>)
//复制选定的节点clone() :
clone(true) : 复制节点,true的时候,节点绑定的事件监听也一起复制过去,不写默认为false
$("li").clone()//复制当前节点 $("li").clone().appendTo("ul");//复制li节点,并将它追加到ul中(是追加到 ul 的内部) $("li").clone(true).appendTo("ul");//复制li节点,并复制li绑定的事件监听,一起追加到ul中(是追加到 ul 的内部)
//替换选定的节点replaceWith(),replaceAll() :
a是被替换的那个对象 b是替换的那个完整标签 a.replaceWith(b);//b就会把a替换掉 (后面的 b 替换了前面的 a) 后面替换前面 b.replaceAll(a);//b把a替换掉 (前面的 b 替换后面的 a) 前面替换后面
//如果有多个p 就会都替换
$("p").replaceWith("<strong>你女朋友最不喜欢的水果是???</strong>");//把整个p标签都换了 换成了 <strong>你女朋友最不喜欢的水果是???</strong>
//如果有多个p 并且只想替换一个
$($("p").get(1)).replaceWith("<strong>你女朋友最不喜欢的水果是???</strong>");//只把第2个p标签替换了 也可以给想要替换的那个标签 加一个ID 就是只替换一个了 $("#abc").replaceWith("<li>我替换了id为abc的那个标签</li>")
//replaceAll() : $("<strong>你妈咪最不喜欢的水果是???</strong>").replaceAll("#abc");//前面的替换了后面的 替换了id为#abc的那个标签 $("<li>我替换了所有的p标签</li>").replaceAll("p");//前面替换了后面的
//包裹wrap() wraoAll() wrapInner() :
//wrap() :
wrap() : 给匹配 到的元素,包裹一个新的html标. a标签对象(被包裹) b是标签(用b标签包裹) 所有的 a标签 都会被包裹 a.wrap(b); //如果有一个a标签 就包裹成 : <b><a>我是a标签</a></b> //如果有多个a标签 就包裹成 : <b><a>我是a标签</a></b> <b><a>我是a标签</a></b> <b><a>我是a标签</a></b> 每个都是分开包裹的 不是一起包裹到一起 a.wrap("b");//就是给a添加了一个父标签 a被b包裹 <p>我是p标签</p> $("p").wrap("<i></i>");//给p标签添加一个父标签,就是用<i>标签把p标签包裹了 就成了<i><p>我是p标签</p></i> /* <i> <p>我是p标签</p> </i> */
//wrapAll() :
wrapAll():把标签都包裹到一起,就算要被包裹标签没在一起,中间有别的标签,也会吧那个要被包裹标签,都移到一起,在一起包裹 //包裹之前 <a>123</a> <p>aaa</p> <a>456</a> a.wrapAll(b);//全部包裹 //包裹之后 <b> <a>123</a> <a>456</a> </b> <p>aaa</p> 这样包裹之后,输出的位置就变了,效果也就变了
//wrapInner() :
wrapInner(): 将匹配标签中的内容,添加一个指定标签(相当于是给原标签添加一个子标签,并且保存的是父标签的文本内容) <a>123</a> : a.wrapInner("b");//结果就是 : <a><b>123</b></a> 用b标签 把a里面的内容括起来 <li title="苹果">苹果</li> $("li").wrapInner("<i></i>");//结果就是 : <li title='苹果'><i>苹果</i></li> <li title="苹果"> <i>苹果</i> </li>
//效果切换 toggleClass() :
是指的效果之间的切换,第一次没有切换的时候有一个效果,切换的时候,是指所有的class综合组成的那个效果 就是当前效果和指定的效果来回切换 <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <p class="high" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> $("p").toggleClass("another ");//其实是改class,当触发这个函数的时候,就等于是把another和height换了一下,上面设置了,当class是high的时候,是红色字体,当class是another的时候,是蓝色字体 所以,触发这个函数,就会变一次颜色,在触发一次,就在变一次,只不过是class之间的切换.是$("p").toggleClass("another")后面的class 和p标签里面原代的class进行切换
//判断元素是否包含某样式 hasClass() :
$("p").hasClass("MyClass");//判断p标签里面是否有个class的属性为MyClass $("p").is("MyClass");//和上面一样
//html()和text() :
<p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p> $("p").html();//就是p标签,两个标签(<p></p>)之间的内容,相当于是p的innerHTML,就是 : <strong>你最喜欢的水果是?</strong> $("p").text();//就是p标签里面的文本数据(文本节点),就是 : 你最喜欢的水果是?
//得到 失去 焦点 focus() blur() :
focus() : 得到焦点 blur() : 失去焦点 $("标签名(#ID名)(.class名)").focus(获取焦点需要执行的方法和语句function(){ 语句 操作}) $("标签名(#ID名)(.class名)").blur(失去焦点需要执行的方法和语句function(){ 语句 操作})
//获取/更改 value()值 defaultValue :
<input type="button" value="请输入账号"/> $("input").val();//这是获取value的值 $("input").val("账号是****");//这是更改value的值 结果就是 : <input type="button" value="账号是****"/>
//defaultValue : 代表value的默认值,就是编写代码的时候,设置value的值是什么,那defaultValue就是什么 一般用于判断 if (txt_value == ""){//意思是,如果value为空,就把开始的默认值再赋值给value 用于设置输入框,如果输入框没有输出东西,就还把默认的value值输入进去,(没得到焦点的时候,输入框里显示默认值,得到焦点后,设置去掉默认值,如果客户没有输入东西,还会给value把默认值赋值回去,用于提醒客户,没有输入东西) $("input").val($("input").defaultValue) }
//查看子元素的个数children() (只是子元素,子元素的子元素,不算,直接子元素才是子元素) :
$("标签").children(); 标签的jQuery对象.children(); <a> <b> <c></c> </b> <d></d> </a> $("a").children();//就是2 因为a的子元素只有b和d
$("b").children();//就是1 因为b的子元素只有c一个
$("d").children();//就是0 因为d没有子元素
//同辈元素,next(),prev(),siblings() :
next();//同辈的下一个元素 prev();//同辈的上一个元素 siblings();//所有的同辈元素 <b>123</b> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> <i>456</i>
// 例子 : next()
var p= $("p").next(); p.html();//p元素的同辈下一个元素的内容(就相当于innerHTML),结果就是 : <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> p的同辈的下一个标签是ul,<ul>这里就是html()的东西</ul> --------------------- // prev()
var p = $("p").prev(); p.html();//就是p的同辈元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123
123
---------------------- // siblings()
var p = $("p").siblings();//所有元素,现在是数组把 p.html();//这个,只是123,因为是数组,如果输出,输出第一个,所以就是b标签的内容就是123 要遍历才能看到所有内容 for(var i =0;p.length;i++){ alert(p[i].innerHTML);//这就是所有的内容,为什么用innerHTML? //因为p是jQuery对象吧,当jQuery对象,后面跟下标的时候,就是DOM对象了,所以只能用innerHTML.这个和jQuery对象的html()方法,功能是一样的, //alert();是个普通的弹框 //结果就是 : 123 你最喜欢的水果是? 苹果 橘子 菠萝 456 }
//事件委托机制 :
事件委托机制 : 我们要找到某个元素,改变其属性,但是这个元素我们不知道能不能找到,所以我们就用一个临时变量,把事件委托给他,然后去寻找元素,找到以后就把事件转交
// $(自定义变量.target).closest("要找的元素").css("找到之后的某一个属性","更改属性值") //这里从点击对象开始往上查询(如果点击的是a,就会先找a,在找span,再找p,再找body,一直除非找到正确的那个标签,就停止网上找了) $(document).bind("click",function(e){ $(e.target).closest("body").css("color","red"); }) //$(document).bind("click",function("p"){ // $("p").css("color","red"); // })
//document:代表整个文档,我要匹配文档中某一个不确定对象,用了这样一种形式 //e:是指我们要找的某个元素,他的是个不特定的值,$(e.target)是那个不特定的对象 //来自于我们不特定的匹配,匹配到谁就是谁 <body> <p title="选择你最喜欢的水果." > <span> <a title='苹果'>苹果</a> <a title='橘子'>橘子</a> <a title='菠萝'>菠萝</a> </span> </p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body>
//获取对象的左边距和上边距 offset() :
用法 : jQuery对象.offset(); jQuery对象.offset().left/top; var $p = $("p").offset();//获得p的左边距和上边距,是个数组 $p.left;//得到的值,就是左边距 $p.top;//得到的值,就是上边距
//设置坐标并显示,show() :
对象.css().show("slow(慢)"/"normal(正常)"/"fast(快)"); 三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值(如：1000) $("#id").mouseover(function(e){ //e相当于原生js中的event //创建一个div元素,e触发的事件对象(mouseover),this代表触发的时候,事件源对象(指html标签) var tooltip = "<div id='tooltip'>" + this.title + "</div>"; $("body").append(tooltip); //追加到文档中 $("#tooltip").css({ "top":e.pageY + "px", "left":e.pageX + "px", "width":"300px" }).show("fast"); //设置x坐标和y坐标并且显示,这里的e,是当事件源触发这个事件的时候,事件和鼠标的相交的一个坐标,用这个坐标,表示这个框的左上角坐标 })
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS实现的自定义右键菜单实例二则
- jQuery中常用的遍历函数用法实例总结
- jquery常用函数与方法汇总
- js+CSS实现模拟华丽的select控件下拉菜单效果
- JQuery自适应窗口大小导航菜单附源码下载
- js实现简洁大方的二级下拉菜单效果代码
- js实现点击向下展开的下拉菜单效果代码
- jQuery实现带延迟的二级tab切换下拉列表效果
- js实现具有高亮显示效果的多级菜单代码
- js+css实现有立体感的按钮式文字竖排菜单效果
- JS实现黑客帝国文字下落效果
- JavaScript中this详解
- 基于JavaScript制作霓虹灯文字 代码 特效
- jquery实现简单合拢与展开网页面板的方法
- jQuery实现可高亮显示的二级CSS菜单效果
- js jquery获取当前元素的兄弟级 上一个 下一个元素
- JavaScript常用标签和方法总结
- jquery简单实现带渐显效果的选项卡菜单代码
- JavaScript中innerHTML，innerText，outerHTML的用法及区别