jquery知识总结（一）

来源：互联网发布：淘宝联盟高佣金活动编辑：程序博客网时间：2024/04/28 08:52

一、Jquery的选择器

1、基本选择器

Id选择器，标签选择器，class选择器，群组选择器

• #id 表示选择指定id这个元素

• .class 表示选择指定的class这个元素

• Element 表示选择指定的标签

• selector1,selector2 匹配多个选择器

$('#div1').html('测试'); //#id 表示选择指定的id元素

$('.div2').html('测试'); //class 表示选择指定的class元素

$('p').html('测试'); //标签选择器表示选择指定的标签元素

$('p,#div1,.div2').html('测试'); //群组选择器,多个选择器，每个之间使用英文逗号隔开

2、层级选择器

• （parent > child 表示父子关系的选择器（跨一级，必须是父子关系）

• ancetor descendant 表示ancetor所有的后代元素（不分层级）

• prev + next 表示当前元素同级相邻元素

• prev~siblings 表示当前元素同级的兄弟元素

$('#div1 p').html('测试'); //选取div1里面的全部p元素

$('#div1 > p').html('测试'); //父子关系选择器

$('#div1 + div').html('测试'); //#div1相邻的div元素（向后）

$('#div1 ~ div').html('测试'); //#div1的同级兄弟元素

3、简单选择器

都需要跟其他的选择器（标签选择器）组合起来使用

• :first 首先，第一，选取第一个元素

• :last 最后，末尾，选取最后一个元素

• :even 偶数选取索引为偶数的元素 0也算偶数

• :odd 奇数选取索引为奇数的元素

• :eq(index) 表示选取索引为index的元素

• :gt(index) 大于选取索引大于index的元素

• :lt(index) 小于选取索引小于index 的元素

• :not(selector) 选取非指定选择器的元素

$('li:first').hide(3000);//:first 表示选取第一个li元素

$('li:last').fadeOut();//:last 表示选取最后一个li元素

$('li:even').hide(3000); //even 表示选取索引为偶数的li元素

$('li:odd').hide(3000); //odd 表示选取索引为奇数的li元素

$('li:eq(3)').hide(3000); //eq表示选取指定索引的li元素

$('li:gt(3)').hide(3000); //gt 表示选取大于索引的li元素

$('li:lt(3)').hide(3000); //lt 表示选取小于索引的li元素

$('li:not(li:eq(3))').hide(3000); //not 表示选取除指定选择器外的其他li元素

4、内容选择器

• :contains(text) 表示内容里包含指定的内容的选择器

• :empty 选择为空的元素

• :has(selector) 选取包含指定选择器的元素

• :parent 表示选取元素中内容不为空的子元素

$("li:contains('水浒')").hide(3000);//:contains() 选取包含指定内容的li元素

$('li:empty').hide(3000); //:empty 选择内容为空的li元素

$('li:has(a)').hide(3000);//:has(选择器) 表示选择包含a标签选择器的li元素

$('li:parent').hide(3000);//:parent 表示选取有子元素的元素

5、可见性选择器

• :hidden 表示选取隐藏的元素 display:none

• :visible 表示选取可见的元素

$('div:hidden').show(3000);//选取display为none的div

• $('div:visible').hide(3000);//表示选取可见的div元素

6、属性选择器

• [attribute] 表示选取包含指定属性的元素

• [attribute=value] 表示选取属性值是value的元素

• [attribute!=value] 表示选取属性值不等于value的元素

• [attribute^=value] 表示选取属性以value开头的元素

• [attribute$=value] 表示选取属性以value结束的元素

• [attribute*=value] 表示选取属性包含value的元素

• [attribute1][attribute2][ attributeN] 表示选取多个指定属性的元素

<body>

<font>font标签</font><br/>

<font size='20'>第二个font标签</font><br/>

<font color='#ff0000'>第三个font标签</font><br/>

<font size='28'color='#00ff00'>最后一个font标签</font><br/>

</body>

$('font[size]').hide(3000);//选取包含size属性的font元素

$('font[size=20]').hide(3000); //选取size属性值是20的font元素

$('font[size!=20]').hide(3000);//选取size属性值不是20的font元素

$('font[color^="#ff0"]').hide(3000);//选取color属性值以#ff0开头的font元素 $('font[color$="f00"]').hide(3000);//选取color属性值以ff0结尾的font元素 $('font[color*="ff"]').hide(3000);//选取color属性值含有ff的font元素 $('font[color][size]').hide(3000); //选取同时具有color和size属性的font元素

7、子元素选择器

• :nth-child(index/even/odd) 从1算起选取指定的子元素，从1开始

• :first-child 选取第一个子元素

• :last-child 选取最后一个子元素

• :only-child 如果只有一个子元素，则选取

二、Jquery的属性方法

属性的操作

attr(name) 表示读取属性的值

attr(key,value) 表示设置，设置key的属性值是value

attr(properties)批量设置，通过json对象去实现，需要传递json对象

attr(key,fn) 表示设置，通属性过回调函数（函数的返回值）来设置属性的值

removeAttr(name) 移除指定的属性

<body>

</body>

//获取属性的值

console.log($('#input').attr('value'));

console.log($('#input').attr('type'));

console.log($('#input').attr('id'));

console.log($('#input').attr('name'));

//单个设置，通过key,value的形式

$('#input').attr('value','华仔');

$('#input').attr('name','useremail');

//单个设置，通过函数的返回值来修改

$('#input').attr('value',function(){return'王小明';});

//通过json对象，来批量修改

$('#input').attr({

name:'useremail',

value:'admin@baidu.com'

});

//删除属性

$('#input').removeAttr('value');

三、Jquery的class操作方法

• addClass(class) 添加指定的class

• removeClass(class) 移出指定的class

• toggleClass(class) 切换class

• hasClass(class) 表示判断指定的选择器是否存在需要查询的class名字如果存在返回true，否则返回false

<html>

<head>

<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>

<scriptsrc='./jquery-1.8.3.min.js'></script>

<styletype="text/css" media="screen">

.apple{

background-color:green;

width:200px;

height:200px;

}

.black{

background-color:yellow;

width:100px;

height:100px;

}

</style>

<scripttype="text/javascript">

//定义加载事件

window.onload= function(){

//绑定点击事件

document.getElementById('btn').onclick= function(){

//添加样式 addClass(class的名字)

$('div').addClass('apple');

}

document.getElementById('yichu').onclick= function(){

//移除指定的class

$('div').removeClass('apple');

}

document.getElementById('toggle').onclick= function(){

//先判断当前的选择器是否具有指定的class，有则移除，没有则添加

$('div').toggleClass('black');

//判断当前选择器是否具有指定的class，返回布尔值

console.log($('div').hasClass('black'));

}

</script>

</head>

<body>

<hr/>

<inputtype='button' id='btn' value='显示'/>

<inputtype='button' id='yichu' value='移出class'/>

<inputtype='button' id='toggle' value='切换黑白'/>

</body>

</html>

四、Jquery的css样式操作

• css(name) 表示获取指定的css设置

• css(name,value) 给指定的css做相应的设置

• css(properties) 通过json对象方式批量设置css样式

<html>

<head>

<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>

<scriptsrc='./jquery-1.8.3.min.js'></script>

<scripttype="text/javascript">

window.onload= function(){

//绑定点击事件

document.getElementById('btn').onclick= function(){

//设置css样式（单个）

//$('div').css('backgroundColor','grey');

//$('div').css('width','200');

//使用json对象方式去设置css

$('div').css({

backgroundColor:'pink',

width:'300',

height:'300'

});

//获取背景色返回值是rgb值

console.log($('div').css('backgroundColor'));

}

</script>

</head>

<body>

</body>

</html>

五、Jquery的文本操作

• html() 获取标签（双标签，如p、div、span等）里的内容或者html标签 innerHtml

• html(val) 给标签设置文本内容，也包含了html标签

• text() 只能获取标签中的文本内容，不包含html标签 innerText

• text(val) 给标签设置文本内容，如果里面包含了html标签，则会被转化成实体字符，最终在页面上原样输出，不会被浏览器解析成html标签。

六、Jquery值操作

• val() 表示获取选择器的value，input select

• val(val) 表示给选择器设置值

textarea：使用val方法可以获取该标签的值，使用html方法也可以获取该标签的值。

七、Jquery的 ajax操作

jQuery中，有2类ajax请求方式：

1.$.ajax(option) jQuery.ajax(option) 参数只有一个，json对象

•async 异步/同步 true：异步 false：同步

•cache 缓存，true：表示缓存数据 false：不缓存数据

•complete 表示当状态码是4的时候去执行的回调函数

•contentType applicaton/x-www-form-urlencoded

•data 参数数据，json对象 {a:值,b:值….}

•dataType text/xml/json/html text是默认值，常用的是json和text

•success 表示状态码是4的时候并且网页的状态码是200或者是304的时候所执行的回调函数

•type 请求的类型 get/post

•url 请求的地址，字符串

2. $.get() $.post()

• jQuery.get(url,[callback],[type])或者$.get(url,[callback], [type]) get请求的参数写在url中，需要自己去拼凑

• jQuery.post(url,[data],[callback], [type])或者$.post(url,[data],[callback],[type])

0 0