Jquery常用的方法汇总

2024-03-27 21:45:03 24

//jQuery的优点:

1轻量级
2强大的选择器
3出色的DOM操作的封装
4可靠的事件处理机制
5完善的Ajax
6不污染顶级变量
7出色的浏览器兼容性
8链式操作方式
9隐式迭代
10行为曾与结构层的分离
11丰富的插件支持
12完善的文档
13开源

<scriptsrc="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();//他们的下一个元素隐藏
returnfalse;
})

//jQuery对象转成DOM对象:

1jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象

var$cr=$("#cr");//jQuery对象
varcr=$[0];//DOM对象

2另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象

var$cr=$("#cr");//jQuery对象
varcr=$cr.get(0);//DOM对象

//DOM对象转成jQuery对象:

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为:$(DOM对象);

varcr=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对象:

1jQuery对象是一个类似数组,可以通过[index]的方法得到相应的DOM对象
var$cr=$("#cr");//jQuery对象
varcr=$[0];//DOM对象
2另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var$cr=$("#cr");//jQuery对象
varcr=$cr.get(0);//DOM对象

//DOM对象转成jQuery对象:

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了.
方式为:$(DOM对象);

varcr=document.getElementById("cr");//DOM对象
var$cr=$(cr);//jQuery对象

//创建元素:

$("<lititle='其他'>123</li>");//创建<li>标签属性为title=其他内容为123
元素节点(标签名) 属性节点(属性title='xxx') 文本标签(123)

//text()文本节点:

text():函数/方法,是获得选定标签内部文本(人眼能够看到的内容)
<li>123</li>
varli=$("li").text();//获得了li的文本节点里面的数据(就是123这个内容)

//attr()获得属性/设置属性/更改属性:

<ptitle="aaa">;

vari=$("p").attr("title");//这是获得p标签里面的title属性的值
$("p").attr("title","bbb");//把p标签里面的title属性的值更改为bbb

//removeAttr()删除指定元素的属性值:

removeAttr(xx,xx);删除属性值
<ptitle="选择你最喜欢的水果.">你最喜欢的水果是?
$("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);//把bc都添加到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=$("ulli:eq(1)").remove();//把ul里面li标签的第二个删除 eq(1);就是下标为1的那个li元素也就是第二个吧因为下标从0开始
$li.appendTo("ul");//把刚才删除的元素重新加入到ul里面
$("ulli").remove("li[title!=苹果]");//把ul元素里面所有的li元素title属性不是苹果的都删除

//removeAttr()删除指定元素的属性值:

//清空empty():

$("ulli: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("你女朋友最不喜欢的水果是???");//把整个p标签都换了换成了 你女朋友最不喜欢的水果是???

//如果有多个p并且只想替换一个

$($("p").get(1)).replaceWith("你女朋友最不喜欢的水果是???");//只把第2个p标签替换了
也可以给想要替换的那个标签加一个ID 就是只替换一个了
$("#abc").replaceWith("<li>我替换了id为abc的那个标签</li>")

//replaceAll():
$("你妈咪最不喜欢的水果是???").replaceAll("#abc");//前面的替换了后面的替换了id为#abc的那个标签
$("<li>我替换了所有的p标签</li>").replaceAll("p");//前面替换了后面的

//包裹wrap()wraoAll()wrapInner():

//wrap():

wrap():给匹配到的元素,包裹一个新的html标.
a标签对象(被包裹) b是标签(用b标签包裹)
所有的a标签都会被包裹
a.wrap(b);
//如果有一个a标签就包裹成:
<a>我是a标签</a>
//如果有多个a标签就包裹成:
<a>我是a标签</a>
<a>我是a标签</a>
<a>我是a标签</a>
每个都是分开包裹的不是一起包裹到一起
a.wrap("b");//就是给a添加了一个父标签a被b包裹
我是p标签
$("p").wrap("");//给p标签添加一个父标签,就是用标签把p标签包裹了就成了我是p标签
/*

我是p标签

*/

//wrapAll():

wrapAll():把标签都包裹到一起,就算要被包裹标签没在一起,中间有别的标签,也会吧那个要被包裹标签,都移到一起,在一起包裹
//包裹之前
<a>123</a>
aaa
<a>456</a>
a.wrapAll(b);//全部包裹
//包裹之后

<a>123</a>
<a>456</a>

aaa
这样包裹之后,输出的位置就变了,效果也就变了

//wrapInner():

wrapInner():将匹配标签中的内容,添加一个指定标签(相当于是给原标签添加一个子标签,并且保存的是父标签的文本内容)
<a>123</a>:
a.wrapInner("b");//结果就是:<a>123</a> 用b标签把a里面的内容括起来
<lititle="苹果">苹果</li>
$("li").wrapInner("");//结果就是:<lititle='苹果'>苹果</li>
<lititle="苹果">
苹果
</li>

//效果切换toggleClass():

是指的效果之间的切换,第一次没有切换的时候有一个效果,切换的时候,是指所有的class综合组成的那个效果
就是当前效果和指定的效果来回切换
<styletype="text/css">
.high{
font-weight:bold; /*粗体字*/
color:red; /*字体颜色设置红色*/
}
.another{
font-style:italic;
color:blue;
}
</style>
<pclass="high"title="选择你最喜欢的水果.">你最喜欢的水果是?
$("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():

<ptitle="选择你最喜欢的水果.">你最喜欢的水果是?
$("p").html();//就是p标签,两个标签()之间的内容,相当于是p的innerHTML,就是:你最喜欢的水果是?
$("p").text();//就是p标签里面的文本数据(文本节点),就是:你最喜欢的水果是?

//得到失去焦点focus()blur():

focus():得到焦点
blur():失去焦点
$("标签名(#ID名)(.class名)").focus(获取焦点需要执行的方法和语句function(){语句操作})
$("标签名(#ID名)(.class名)").blur(失去焦点需要执行的方法和语句function(){语句操作})

//获取/更改value()值defaultValue:

<inputtype="button"value="请输入账号"/>
$("input").val();//这是获取value的值
$("input").val("账号是****");//这是更改value的值
结果就是:<inputtype="button"value="账号是****"/>

//defaultValue:
代表value的默认值,就是编写代码的时候,设置value的值是什么,那defaultValue就是什么
一般用于判断
if(txt_value==""){//意思是,如果value为空,就把开始的默认值再赋值给value
用于设置输入框,如果输入框没有输出东西,就还把默认的value值输入进去,(没得到焦点的时候,输入框里显示默认值,得到焦点后,设置去掉默认值,如果客户没有输入东西,还会给value把默认值赋值回去,用于提醒客户,没有输入东西)
$("input").val($("input").defaultValue)
}

//查看子元素的个数children()(只是子元素,子元素的子元素,不算,直接子元素才是子元素):

$("标签").children();
标签的jQuery对象.children();
<a>

<c></c>

<d></d>
</a>
$("a").children();//就是2 因为a的子元素只有b和d

$("b").children();//就是1因为b的子元素只有c一个

$("d").children();//就是0因为d没有子元素

//同辈元素,next(),prev(),siblings():

next();//同辈的下一个元素
prev();//同辈的上一个元素
siblings();//所有的同辈元素
123
<ptitle="选择你最喜欢的水果.">你最喜欢的水果是?
<ul>
<lititle='苹果'>苹果</li>
<lititle='橘子'>橘子</li>
<lititle='菠萝'>菠萝</li>
</ul>
456

//例子:next()

varp=$("p").next();
p.html();//p元素的同辈下一个元素的内容(就相当于innerHTML),结果就是:
<lititle='苹果'>苹果</li>
<lititle='橘子'>橘子</li>
<lititle='菠萝'>菠萝</li>
p的同辈的下一个标签是ul,<ul>这里就是html()的东西</ul>
---------------------
// prev()

varp=$("p").prev();
p.html();//就是p的同辈元素的上一位就是b元素吧b元素的html(),就是123把所以就是123

123

----------------------
// siblings()

varp=$("p").siblings();//所有元素,现在是数组把
p.html();//这个,只是123,因为是数组,如果输出,输出第一个,所以就是b标签的内容就是123 要遍历才能看到所有内容
for(vari=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>
<ptitle="选择你最喜欢的水果.">


<atitle='苹果'>苹果</a>
<atitle='橘子'>橘子</a>
<atitle='菠萝'>菠萝</a>


<ul>
<lititle='苹果'>苹果</li>
<lititle='橘子'>橘子</li>
<lititle='菠萝'>菠萝</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标签)
vartooltip="<divid='tooltip'>"+this.title+"<\/div>";
$("body").append(tooltip);//追加到文档中
$("#tooltip").css({
"top":e.pageY+"px",
"left":e.pageX+"px",
"width":"300px"
}).show("fast");//设置x坐标和y坐标并且显示,这里的e,是当事件源触发这个事件的时候,事件和鼠标的相交的一个坐标,用这个坐标,表示这个框的左上角坐标
})

Jquery常用的方法汇总

热门推荐

随机推荐