UNIQ | Life is only inevitable, there is no chance.
2019-05-16 | UNLOCK

jQuery复习

一.选择器

1.1 基本选择器

#id id选择器

1
2
<div id='one'>AAA</div>
$("#one").css("background-color","red");

element 标签选择器

1
2
3
<div>AAA</div>
<div>BBB</div>
$("div").css("background-color","yellow");

.class 类选择器

1
2
<div class='mini'>AAA</div>
$(".mini").css("background-color","blue");

* 所有元素

1
2
3
4
<div>AAA</div>
<span>bbb</span>
<h1>ccc</h1>
$("*").css("background-color","green");

s1,s2,… 多选择器，将多个选择器的结果添加一个数组中

1
2
3
4
<div class='mini'>AAA</div>
<div id='two'>BBB</div>
<span>CCC</span>
$("span,#two,.mini").css("background-color","brown");

1.2 层级选择器

A B ，获得A元素内部所有的B元素

1
2
3
4
<body>
	<div class='mini'>AAA</div>
</body>
$("body div").css("background-color", "red");

A > B ，获得A元素内部所有的B子元素

1
2
3
4
5
6
<body>
	<div>AAA</div>
	<div>BBB</div>
	<span>CCC</span>
</body>
$("body > div").css("background-color", "yellow");

A + B ，获得A元素后面的第一个兄弟B

1
2
3
<div>AAA</div>
<div>BBB</div>
$("div + div").css("background-color", "blue");

A ~ B ，获得A元素后面的所有的兄弟B

1
2
3
4
5
6
<div>AAA</div>
<span>BBB</span>
<span>ccc</span>
<span>ddd</span>
<div>eee</div>
$("div ~ span").css("background-color", "green");

A.siblings(“B”)，A的所有是B的兄弟

1
2
3
4
5
<span>BBB</span>
<div>AAA</div>
<span>ccc</span>
<span>ddd</span>
$("div").siblings("span").css("background-color", "brown");

1.3 基本过滤选择器

过滤选择器都有 :

:first 选中第一个元素

1
2
3
4
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
$("div:first").css("background-color", "red");

:last 选中最后一个

1
2
3
4
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
$("div:last").css("background-color", "yellow");

:eq(index) 获得指定索引(从0开始)

1
2
3
4
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
$("div:eq(2)").css("background-color", "blue");

:gt(index) 大于

1
2
3
4
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
$("div:gt(1)").css("background-color", "red");

:lt(index) 小于

1
2
3
4
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
$("div:lt(1)").css("background-color", "green");

:animated 获得所有在动画的元素

1
$(":animated").css("background-color", "green");

:not(selector) 去除所有与给定选择器匹配的元素

1
2
3
4
<div class="one">AAA</div>
<div class="two">BBB</div>
<div class="three">CCC</div>
 $("div:not('.one')").css("background-color", "blue");

:header 获得所有标题元素 例如：

…

1
2
3
4
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
$(":header").css("background-color", "green").css("font-size","30px");

:even 偶数，从 0 开始计数

1
2
3
4
5
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
$("div:even").css("background-color", "brown");

:odd 奇数

1
2
3
4
5
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
$("div:odd").css("background-color", "yellow");

1.4 内容过滤选择器

均要加冒号

:empty 当前元素是否为空（是否有标签体–子元素、文本）

1
2
3
4
5
6
7
<div></div>
<div></div>
<div>
	<span></span>
</div>
<div>DDD</div>
$("div:empty").css("background-color","yellow");

:has(…) 当前元素，是否含有指定的子元素

1
2
3
4
5
6
7
<div></div>
<div></div>
<div>
	<span></span>
</div>
<div>DDD</div>
$("div:has('span')").css("background-color","blue");

:parent 当前元素是否是父元素（自己是否拥有子元素）

1
2
3
4
5
6
7
<div></div>
<div></div>
<div>
	<span></span>
</div>
<div>DDD</div>
$("div:parent").css("background-color","green");

:contains( text ) 标签体是否含有指定的文本

1
2
3
4
<div>aaa</div>
<div>bbb</div>
<div>ddd</div>
$("div:contains('d')").css("background-color","red");

1.5 可见性过滤选择器

:hidden 隐藏。特指 <xxx style="display:none;"> 或者 <input type="hidden">

1
2
3
4
<div style="display:none">aaa</div>
<div>bbb</div>
<input type="hidden">
$("div:hidden").show(1000).css("background-color","yellow");

:visible 可见（默认）

1
2
3
4
<div style="display:none">aaa</div>
<div>bbb</div>
<input type="hidden">
$("div:visible").css("background-color","red");

1.6 属性选择器

[属性名] 获得指定的属性名的元素

1
2
3
4
<div title='aaa'>aaa</div>
<div>bbb</div>
<div>ddd</div>
$("div[title]").css("background-color","red");

[属性名=值] 获得属性名 等于 指定值的 的元素

1
2
3
4
<div title='aaa'>aaa</div>
<div>bbb</div>
<div title='test'>ddd</div>
$("div[title='test']").css("background-color","blue");

[属性名!=值] 获得属性名 不等于 指定值的 的元素

1
2
3
<div title='aaa'>aaa</div>
<div title='test'>ddd</div>
 $("div[title!='test']").css("background-color","yellow");

[as1][as2][as3]…. 复合选择器，多个条件同时成立。类似 where …and…and

1
2
3
4
<div title='aes' id="aaa">aaa</div>
<div >bbb</div>
<div title='test' id='ddd'>ddd</div>
$("div[id][title*='es']").css("background-color","red");

[属性名^=值] 获得以属性值 开头 的元素

1
2
3
4
<div title='test'>aaa</div>
<div title='teve'>bbb</div>
<div title='txt'>ddd</div>
$("div[title^='te']").css("background-color","green");

[属性名$=值] 获得以属性值 结尾 的元素

1
2
3
4
<div title='test'>aaa</div>
<div title='teve'>bbb</div>
<div title='txt'>ddd</div>
$("div[title$='est']").css("background-color","brown");

[属性名*=值] 获得 含有属性值 的元素

1
2
3
4
<div title='test'>aaa</div>
<div title='teve'>bbb</div>
<div title='txt'>ddd</div>
$("div[title*='es']").css("background-color","yellow");

1.7 元素过滤选择器

:nth-child(n) 第n个孩子(从1开始)

1
2
3
4
5
6
7
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
$("body :nth-child(2)").css("background-color","yellow");

:first-child 第一个孩子

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
	<div>
	 	<span></span>
	 	<span></span>
	 	<span></span>
	</div>
	<div></div>
	<div></div>
	<div></div>
</body>
//注意空格的区别
$("div :first-chlid").css("background-color","yellow");//div里面的元素的第一个
$("div:first-chlid").css("background-color","yellow");//div的第一个

:last-child 最后一个孩子

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
	<div>
	 	<span></span>
	 	<span></span>
	 	<span></span>
	</div>
	<div></div>
	<div></div>
	<div></div>
</body>
//注意空格的区别
$("div :last-chlid").css("background-color","yellow");//div里面的元素的最后一个
$("div:last-chlid").css("background-color","yellow");//div的最后一个

:only-child 仅有一个孩子

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<div>
	 	<span></span>
	</div>
	<div></div>
	<div>
		<span></span>
	 	<span></span>
	</div>
	<div></div>
</body>
$("div :last-chlid").css("background-color","yellow");

1.8 表单过滤选择器

:input 所有的表单元素。<input> / <select> / <textarea> / <button>

1
2
3
4
5
<input>
<select><option></option></select>
<textarea></textarea>
<button></button>
$(":input").css("background-color","yellow");

:text 文本框<input type="text">

1
2
<input type="text">
$(":text").css("background-color","yellow");

:password 密码框<input type=" password ">

1
2
<input type="password">
$(":password").css("background-color","yellow");

:radio 单选<input type="radio">

1
2
3
4
5
6
7
<label><input name="Fruit" type="radio" value="" />苹果 </label> 
<label><input name="Fruit" type="radio" value="" />桃子 </label> 
<label><input name="Fruit" type="radio" value="" />香蕉 </label> 
<label><input name="Fruit" type="radio" value="" />梨 </label> 
<label><input name="Fruit" type="radio" value="" />其它 </label> 
<input type="radio">
$(":radio").css("background-color","yellow");

:checkbox 复选框<input type="checkbox">

1
2
3
4
5
6
7
8
9
<p><input type="checkbox" name="category" value="今日话题" />今日话题 </p>   
<p><input type="checkbox" name="category" value="视觉焦点" />视觉焦点</p>
<p><input type="checkbox" name="category" value="财经" />财经</p>    
<p><input type="checkbox" name="category" value="汽车" />汽车</p>    
<p><input type="checkbox" name="category" value="科技" />科技</p>    
<p><input type="checkbox" name="category" value="房产" />房产</p>    
<p><input type="checkbox" name="category" value="旅游" />旅游</p>
<input type="checkbox">
$(":checkbox").css("background-color","yellow");

:submit 提交按钮<input type="submit">

1
2
<input type="submit">
$(":submit").css("background-color","yellow");

:image 图片按钮<input type="image" src="">

1
2
<input type="image" src="">
$(":image").css("background-color","yellow");

:reset 重置按钮<input type="reset">

1
2
<input type="reset" src="">
$(":reset").css("background-color","yellow");

:file 文件上传<input type="file">

1
2
<input type="file">
$(":file").css("background-color","yellow");

:hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none">

1
2
3
<input type="hidden">
<div style="display:none"></div>
$(":hidden").css("background-color","yellow");

:button 所有普通按钮。<button > 或 <input type="button">

1
2
3
<button >button</button>
<input type="button">
$(":button").css("background-color","yellow");

select 下拉列表 (没有:号）

1
2
3
4
5
6
7
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
$("select").css("background-color","yellow");

textarea 多行文本框（没有:号）

1
2
<textarea></textarea>
$("textarea").css("background-color","yellow");

1.9 表单独享属性过滤选择器

:enabled 可用

1
2
3
<input type='text'>
<input type='text' disabled="disabled">
$("input:enabled").val("aaaa");

:disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或<xxx disabled>

1
2
3
4
5
<input type='text'>
<input type='text' disable="">
<input type='text' disable>
<input type='text' disabled="disabled">
$("input:disabled").val("bbbb");

:checked 选中（单选框radio、复选框 checkbox）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p><input type="checkbox" name="category" value="今日话题" />今日话题 </p>   
<p><input type="checkbox" name="category" value="视觉焦点" />视觉焦点</p>
<p><input type="checkbox" name="category" value="财经" />财经</p>    
<p><input type="checkbox" name="category" value="汽车" checked=""/>汽车</p>    
<p><input type="checkbox" name="category" value="科技" />科技</p>    
<p><input type="checkbox" name="category" value="房产" />房产</p>    
<p><input type="checkbox" name="category" value="旅游" />旅游</p>


<label><input name="Fruit" type="radio" value=""  checked=""/>苹果 </label> 
<label><input name="Fruit" type="radio" value="" />桃子 </label> 
<label><input name="Fruit" type="radio" value="" />香蕉 </label> 
<label><input name="Fruit" type="radio" value="" />梨 </label> 
<label><input name="Fruit" type="radio" value="" />其它 </label> 

$(":checked").css("background-color","yellow");

:selected 选择（下拉列表 select option）

1
2
3
4
5
6
7
<select>
  <option value ="volvo" selected="">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
$("selected").css("background-color","yellow");

二.jQuery属性和CSS

2.1 属性操作

attr()

设置单个属性

1
2
<img title="">
$('img').attr('title','哎哟，不错哦');

设置多个属性

1
2
3
4
5
6
<img title="" alt="" >
$('img').attr({
    title:'image',
    alt:'缺省',
    style:'opacity:.5'
});

获取属性

1
2
<img title="images" alt="" >
var oTitle = $('img').attr('title');

removeattr()

移除属性

1
2
<img title="images" alt="" >
$('img').removeAttr('title');

prop()

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

设置和获取属性

1
2
3
4
5
<label><input name="Fruit" type="radio" value=""  checked=""/>苹果 </label> 
// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false

val()/text()/html()

1
2
3
$obj.val()		获取或者设置表单元素的value属性的值
$obj.html() 	对应innerHTML
$obj.text()		对应innerText/textContent，处理了浏览器的兼容性。注意点：如果获取jquery对象text属性的时候jquery对象是一个数组，那么此时会把数组中所有元素的文本都获取到

2.2 CSS操作

css()

css(name) 获得指定名称的css值
css(name ,value) 设置一对值
css(prop) 设置一组值

操作单个样式

1
2
<div></div>
$("div").css("border","1px solid red");

操作多个样式

1
2
3
4
5
6
7
<div></div>
$("div").css({
    "width":"300px",
    "height":"50px",
    "font-size":"60px",
    "color":"blue"
});

获取样式

1
2
<div style='background-color:'red'></div>
$('div').css('background-color');
  1. 设置样式操作的时候，如果是多个元素，那么给所有的元素设置相同的值
  2. 获取样式操作的时候，如果是多个元素，那么只会返回第一个元素的值。

class类操作

addClass(“A”) 追加一个类
removeClass(“A”) 将指定类移除
toggleClass(“A”) 如果有A将移除，如果没有将添加。
hasClass(“A”) 用于判断是否含有指定样式，返回值为true false

三. jQuery尺寸和位置操作

3.1 CSS尺寸

height() 获得 或 设置 高度 //不包括内边距、边框和外边距
width()获得 或 设置 宽度

1
2
3
4
5
<div style="height:100px;width:110px"></div>
$("div").css("border","1px solid red");
alert($("div").height()); //数字类型
alert($("div").width());
$("div").height("300px"); //设置高度，值可以是数字也可以是字符串

获取可视区宽高度

1
2
3
4
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();

css获取到的宽高是带 px 的,需要数值则需要用parseInt()转换

css设置样式可不加px

3.2 innerWidth/outerWidth

innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。 —>clientWidth
outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。 —>offsetWidth
outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。

3.3 scrollTop与scrollLeft

获取页面滚出的位置

1
2
3
4
// 获取页面被滚出的高度
$(window).scrollTop();
// 获取页面被滚出的宽度
$(window).scrollLeft();

3.4 offset方法与position方法

offset()

offset方法获取元素距离document的位置

1
2
3
4
// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//设置位置
$("div").offset({"top":0,"left":0});//不用加px

position方法获取的是元素距离第一个定位了的父元素(offsetParent)的位置

获取相对于其最近的有定位的父元素的位置。

1
2
// position仅用于获取当前元素相对于父元素的位置，不可以设置。如果非要设置，需要引入jquery-ui.js
$(selector).position();

四.jQuery文档处理

4.1 创建节点

1
$('<span>这是一个span元素</span>');

4.2 内部插入(不可重复插入)

第一种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
A.append(B)  将B插入到A的内部后面（之后的串联操作，操作A）
	<A>
		<C></C>
		<C></C>
		<C></C>
		<B></B>
	<A>
	
A.prepend(B) 将B插入到A的内部前面
	<A>
		<B></B>
		<C></C>
		<C></C>
		<C></C>
	<A>

第二种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A）
	<A>
		<C></C>
		<C></C>
		<C></C>
		<B></B>
	<A>

A.prependTo(B) 将A插入到B的内部前面
	<B>
		<A></A>
		....
	<B>

4.3 外部插入

第一种方法

1
2
3
4
5
6
7
8
A.insertAfter(B) , 将A插入到B后面（同级）
	......
	<B></B>
	<A></A>
A.insertBefore(B) 将A插入到B前面
	<A></A>
	<B></B>
	......

第二种方法

1
2
3
4
5
6
7
8
A.after(B)  , 将B插入到A后面（同级）
	......
	<A></A>
	<B></B>
A.before(B) ，将B插入到A前面
	<B></B>
	<A></A>
	......

4.4 删除节点

empty() 清空标签体（清空文本节点和子节点）,自身保留(清理门户),会清除子元素上绑定的内容
remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留

注意:$(‘div’).html(‘’);// 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

4.5 复制节点

clone(even)

even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

1
2
3
4
<body>
	<div></div>
</body>
$("body").append($('div').clone(true));

4.6 替换节点

A.replaceWith(B) ，使用B将A替换掉

1
2
<p>p</p>
$("p").replaceWith("<a>xxxx</a>");

A.replaceAll(B) ，使用A替换B

1
2
3
4
<p>p</p>
<p>p</p>
<p>p</p>
$("<a>ssss</a>").replaceAll("p");
jQuery

评论加载中