《锋利的 jQuery（第2版）》

最新推荐文章于 2020-10-03 21:14:57 发布

kingrome2009

最新推荐文章于 2020-10-03 21:14:57 发布

阅读量4.8k

点赞数 6

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/kingrome2017/article/details/78450591

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery兼容于所有主流浏览器, 包括Internet Explorer 6
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。
如果需要支持 IE6/7/8，那么请选择1.9

您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

文档就绪事件

jQuery 入口函数与 JavaScript 入口函数的区别： jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 入口函数:
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
$(function(){
 
   // 开始写 jQuery 代码...
 
});
--------------------------
JavaScript 入口函数:
window.onload = function () {
    // 执行代码
}

jQuery 选择器

1.基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

2.层次选择器

 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

3.过滤选择器(重点)

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

4.表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

css选择器有哪些类型？

1、标签选择器（如：body,div,p,ul,li）。

2、.类选择器（如：class="head",class="head_logo"） 。

3、ID选择器（如：id="name",id="name_txt"）。

4、全局选择器（如：*号）。

5、.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。

6、.继承选择器（如：div p,注意两选择器用空格键分开）。

7、伪类选择器（如：就是链接样式,a元素的伪类，
4种不同的状态：link、visited、active、hover。）。

获得内容 - text()、html() 以及 val()

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery - 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

思考题

var a = 7;
$(function(){
alert(8)
})
alert(7)
结果//7,8

jquery与其他库相冲突

var $j = JQuery.noConflict();

// 如果table下tbody中的每一行下的每一列的checkbox没有禁选

$('#table>tbody>tr:has(td:has(:checkbox:enabled))').css('background':'red');

dom

var checks = document.getElementById('checks')
			alert(checks.checked)

jquery

$(obj).is(':checked')?alert(true):alert(false);

$('.list>a').click(function(){
				$(this).addClass('current').next().show()
				.parent().siblings().
				children('a').removeClass('current').next().hide();
				return false;
			})

jquery转dom 对象

var rc = $('#rc');
		var rcs = rc.get(0)
		var rcs = rc[0];
		alert(rcs.innerHTML)

dom转jquery

var op = document.getElementById('rc')
		alert($(op).text())

jquery 判断元素是否存在用下面的方法，而直接使用$("#rc")无法进行准确判断，因为它获取的永远是对象

if ($('#rc').length>0) {
			alert('yes')
		}

dom实现案例

var btn = document.getElementById('btn');

		btn.onclick=function () {
			var arr = new Array,
			checks = document.getElementsByName('check');
			for (var i = 0; i < checks.length; i++) {
				if(checks[i].checked){
					arr.push(checks[i].value)
				}
			}
			alert('选中的个数'+arr.length)
		}

		 var legs = document.getElementById('tab')
		 var tbody = legs.getElementsByTagName('tbody')[0]
		 var tr = tbody.getElementsByTagName('tr')
		 for (var i = 0; i <tr.length; i++) {
		 	if (i%2==0) {
		 		tr[i].style.color = 'red'
		 	}
		 }

选择器–过滤选择器

基本过滤选择器

基数

$('div:even').css('background','red')

偶数

$('div:odd').css('background','green')

可见元素

$('div:visible').css('fontSize','25px')

filter内容过滤选择器

$('ul li').filter(":contains('nihaoss')").css('background','green')

表单过滤选择器

$('#dis:disabled').val('发生变化了')

注意加空格是—选取select里面选中的

alert($('select :selected').text())

选取其自身的selected

alert($('option:selected').text())

// 同上
alert($('input:text').length)
如:$('#form :text').length

如何获取input

var legs = $('input[name=check]:checked').length
		alert(legs)

判断元素是否可见

if ($('#dis').is(':visible')) {
			alert('可见元素')
		}

操作dom

//dom-core
		//document.getElementById('de')....
//html-dom
		//element.src ...
//css-dom
		//element.style.color='red'...

动态插入节点

var ul = '<ul><li>1</li><li>2</li><li>3</li></ul>';
		//$('.div').append(ul); --向后
			//$(ul).appendTo($('.div'))
			$('.div').prepend(ul)
				//$(ul).prependTo('.div')
					//$('.div').after(ul)--------------------结构外部的追加到下一个兄弟节点
						//$('.div').before(ul)
						//$(ul).insertBefore('.div')

删除元素

// $('ul li:eq(0)').remove()--全删
		//detach()--也是删除，但是会保留元素的事件--不全删保留事件
		//empty()
			$('ul li:eq(2)').empty()
			//当前元素所有的后代元素清空

复制节点

典型的拖动商品到购物车

$(this).clone(true).appendTo('body');
//克隆元素如果是true绑定的事件一同复制

offset（）方法

获取元素在当前视窗的相对偏移，即top,left 只对可见元素有效

属性操作

追加样式

	$("p").addClass('jk')

1、如果给一个元素添加多个class那么就等于合并了他们的样式

2、如果有不同的class设定了同一个属性值，则后者覆盖前者。

移除样式

$('p').removeClass('jk')

toggleClass

如果类名存在则删除它，如果类名不存在则添加它

	$('p').toggleClass('jk')

样式是否存在

	$('p').hasClass('jk')
等同于如下方法：

$('p').is('.jk')

html-text-innerHTML

注意：

1、javascript中的innerText属性并不能在火狐浏览器下运行，而jQuery的text方法支持所有浏览器

val()

	this.defaultValue     //当前文本的默认值

遍历节点

children（）只考虑子元素，不考虑后代元素

next（）下一个相邻的同辈元素

prev（）上一个相邻同辈元素

siblings（）前后所有的同辈元素

parent（）父元素

parents（）返回多个父元素节点

closest（）同parents 类似但，只返回匹配的第一个元素节点

dom操作案例

<p><a href="###" class="tooltip" title="这是我的超链接提示1">提示1</a></p>

	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			var x = 10,y=20;
			$(' a.tooltip').hover(function(e){
				this.myTitle = this.title
				this.title = '';
				var div = '<div id="tooltip">'+this.myTitle+'</div>'
				$('body').append(div);
				$('#tooltip').css({
					'top':(e.pageY+y)+'px',
					'left':(e.pageX+x)+'px'
				}).show('fast')
			},function(){
				this.title=this.myTitle;
				$('#tooltip').remove()
			})
		})
	</script>

jquery 事件

$(window).load(function(){}) 相当于 window.onload=function{}

$('.panel h2').bind('click',function(){
				if ($(this).next().is(':visible')) {
					$(this).next().hide()
				}
				else{
					$(this).next().show()
				}
			})

下面toggle 方法的实现方式 toggle 模拟鼠标连续点击事件

$('.panel h2').toggle(function(){
				//$(this).next().show()
				$(this).next().toggle()
			},function(){
				// $(this).next().hide()  == 如果元素是显示的就让其隐藏，隐藏的就让其显示
				$(this).next().toggle()
			})

事件冒泡

$('#span1').bind('click',function(e){
				alert('span')
				//e.stopPropagation()  //阻止冒泡

				return false     //return false 可以阻止冒泡和 默认行为
			})

			$('.wai').bind('click',function(){
				alert('wai')
			})

移除绑定事件

$('#span').bind('click',myfun = function(){
				alert(1)
			}).bind('click',myfun2 = function(){
				alert(2)
			})

			$('.panel h2').bind('click',function(){
				$('#span').unbind('click',myfun2)
			})

模拟事件

// $('#span').trigger('click')

			//触发自定义事件

			$('.btn').bind('my',function(e){
				alert('我的自定义'+e)
			})

			$('.btn').trigger('my',1)



			// $('input').trigger('focus')  自动获取焦点
 
			$('input').triggerHandler('focus')  .//只是执行事件

dom案列动态切换展示##

*{
			margin: 0;
			padding:0;
		}
		img{
			width: 100px;
			height: 100px;
		}
		li{
			float: left;
			list-style: none;
		}
		.v_content{
			width: 400px;
			height: 138px;
			overflow: hidden;
			position: relative;
		}
		ul{
			position: absolute;
			left:0;
		}
		a{
			display: block;
			width: 100%;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.v_caption{
			width: 400px;
		}
		.v_show{
			margin: 0 auto;
			width: 400px;
		}
		.next{
			background-color: #fd5004;
			color:#fff;
			cursor: pointer;
		}
		.current{
			color:#fd5004;
		}

html

<div class="v_show">
		<div class="v_caption">
			<h2 class="cartion fl">卡通动漫</h2>
			<div class="highlight_tip fl">
				<span class="current">1</span><span>2</span><span>3</span><span>4</span>
			</div>
			<div class="change_btn fl">
				<span class="prev">上一页</span>
				<span class="next">下一页</span>
			</div>
			<em class="fr"><a href="###">更多></a></em>
		</div>
		<div class="v_content">
			<ul class="v_content_list">
				<li>
					<a href="###"><img src="./img/img-1.jpg" alt=""></a>
					<h4><a href="###">海贼王1</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-2.jpg" alt=""></a>
					<h4><a href="###">海贼王1</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-3.jpg" alt=""></a>
					<h4><a href="###">海贼王1</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-4.jpg" alt=""></a>
					<h4><a href="###">海贼王1</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-5.jpg" alt=""></a>
					<h4><a href="###">海贼王2</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-1.jpg" alt=""></a>
					<h4><a href="###">海贼王2</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-5.jpg" alt=""></a>
					<h4><a href="###">海贼王2</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-1.jpg" alt=""></a>
					<h4><a href="###">海贼王2</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-1.jpg" alt=""></a>
					<h4><a href="###">海贼王3</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-2.jpg" alt=""></a>
					<h4><a href="###">海贼王3</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-3.jpg" alt=""></a>
					<h4><a href="###">海贼王3</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-4.jpg" alt=""></a>
					<h4><a href="###">海贼王3</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-1.jpg" alt=""></a>
					<h4><a href="###">海贼王4</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-2.jpg" alt=""></a>
					<h4><a href="###">海贼王4</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-3.jpg" alt=""></a>
					<h4><a href="###">海贼王4</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
				<li>
					<a href="###"><img src="./img/img-4.jpg" alt=""></a>
					<h4><a href="###">海贼王4</a></h4>
					<span>播放：<em>28,267</em></span>
				</li>
			</ul>
		</div>
	</div>

<script>
		$(function(){
			var page = 1,
				i = 4;
			var parent = $('.v_show');
			var v_show = parent.find('.v_content_list');
			var v_content = parent.find('.v_content');

			var v_width = v_content.width();
			var len = v_show.find('li').length;
			var page_count = Math.ceil(len/i)  //4

			$('span.next').click(function(){
				if (!v_show.is(':animated')) {
					if (page == page_count) {
						v_show.animate({left:'0px'},'slow')
						page = 1
					}
					else{
						v_show.animate({left:'-='+v_width},'slow')
						page++;
					}
					$('.highlight_tip span').eq((page-1)).addClass('current').siblings().removeClass('current')
				}
			})
			$('span.prev').click(function(){
				if (!v_show.is(':animated')) {
					if (page == 1) {
						v_show.animate({left:'-='+v_width*(page_count-1)},'slow')
						page = page_count
					}
					else{
						v_show.animate({left:'+='+v_width},'slow')
						page--;
					}
					$('.highlight_tip span').eq((page-1)).addClass('current').siblings().removeClass('current')
				}
			})
		})
	</script>

dom tab选项卡

*{
			margin: 0;
			padding:0;
		}
		.tab{
			width: 500px;
			border:6px solid #ff5004;
			height: 300px;
			margin: 0 auto;
		}
		ul{
			width: 100%;
			height: 30px;
		}
		li{
			width: 10%;
			float: left;
			line-height: 30px;
			height: 30px;
			background-color: green;
			color: #fff;
			margin-right: 10px;
			font-size: 24px;
			list-style: none;
			cursor: pointer;
		}
		li.selected{
			background-color: blue;
		}
		.tab_box{
			width: 100%;
			border-top: 5px solid #000;
		}
		.hide{
			display: none;
		}
		.hover{
			background-color: blue;
		}

html

<div class="tab">
		<ul class="tab_menu">
			<li class="selected">北京</li>
			<li>上海</li>
			<li>深圳</li>
		</ul>
		<div class="tab_box">
			<div>北京，这个的首都</div>
			<div class="hide">上海，中国的第一个现代化城市</div>
			<div class="hide">深圳，中国的改革开放试验城市</div>
		</div>
	</div>

<script>
		$(function(){
			$('.tab_menu li').bind('click', function(){
				$(this).addClass('selected').siblings().removeClass('selected');
				let index = $(this).index() //拿到当前li在所有的li中的下标
				$('.tab_box>div').eq(index).show().siblings().hide()
			}).hover(function(){
				$(this).addClass('hover')
			},function(){
				$(this).removeClass('hover')
			})4
		})
	</script>

表单form 应用

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		#comment{
			height: 150px;
			overflow-y:auto;
			resize: none;
		}
	</style>
</head>
<body>
	<form action="">
		<div class="msg">
			<span class="bigger">放大</span>
			<span class="smaller">缩小</span>
			<span class="top">向上</span>
			<span class="down">向下</span>
			<textarea name="" id="comment">
				此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化此文本框高度变化，多行文本变化。
			</textarea>
		</div>
	</form>
	<hr/></br>
	<!-- form2 -->
	<form action="">
		你爱好的运动是什么？</br>
		<input type="checkbox" value="足球"/>
		<input type="checkbox" value="篮球"/>
		<input type="checkbox" value="羽毛球"/>
		<input type="checkbox" value="乒乓球"/>
		<input type="checkbox" id="checkAll" value="全 选/全不选" />全 选/全不选
		<input type="button" id="checkRev" value="反 选" />
	</form>
	<form action="">
		<input type="text" class="require">
		<input type="submit" value="提交" id="send">
	</form>

	<!-- table -->
	<table>
		<tr>
			<td><input type="checkbox"></td>
			<td>1</td>
			<td>你好，长孙娜</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>2</td>
			<td>你好，娜</td>
		</tr>
		<tr>
			<td><input type="checkbox" checked="true"></td>
			<td>3</td>
			<td>你好，长娜</td>
		</tr>
	</table>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			var $comment = $('#comment')
			$('.bigger').click(function(){
				if (!$comment.is(':animated')) {
					if ($comment.height()<500) {
						$comment.animate({height:'+=50'},'slow')
					}
				}
			})
			$('.smaller').click(function(){
				if (!$comment.is(':animated')) {
					if ($comment.height()>50) {
						$comment.animate({height:'-=50'},'slow')
					}
				}
			})
			$('.top').click(function(){
				if (!$comment.is(':animated')) {
					$comment.animate({scrollTop:'-=50'},'slow')
				}
			})
			$('.down').click(function(){
				if (!$comment.is(':animated')) {
					$comment.animate({scrollTop:'+=50'},'slow')
				}
			})
		})
		// 复选框最基本的应用的就是，全选，反选。全不选
		$(function(){
			$('#checkAll').click(function(){
				$(':checkbox').prop('checked', this.checked)
			})
			$('#checkRev').click(function(){
				$(':checkbox').each(function(){
					this.checked = !this.checked
				})
			})
		})
		/*下拉框应用*/
		var options = $('#select option:selected')
		// 双击某个选项，添加给对方
		$('#slect').dblclick(function(){
			var options = $('option:selected', this)
		})
		/*表单验证*/
		$('form .require:input').blur(function(){
			if ($(this).is('#username')) {
				//...
			}
			else{
				console.log(1)
			}
			// if ($(this).is('#mail')) {}

		}).keyup(function(){
			$(this).triggerHandler('blur')
		}).focus(function(){
			// $(this).triggerHandler('blur')
			$(this).trigger('blur') //-----------------trigger 不仅会触发元素绑定事件，也会触发浏览器默认事件，而不会定位到文本框上
		})
		$('#send').click(function(){
			$('form :input').trigger('blur')
		})

		// $('tbody>tr:has(:checked)').addClass('on')
		// 另一种写法---装逼写法
		$('tbody>tr:has(:checked)')['addClass']('on');
	</script>
</body>
</html>

dom slice parseint 应用##

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		.msg{
			width: 500px;
			margin: 0 auto;
		}
		span{
			display: block;
			background-color: #fd5004;
			color:#fff;
			float: left;
			font-size: 26px;
			cursor: pointer;
		}
		.bigger{
			background-color: green;
			margin-right: 20px;
		}
		#para{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="msg">
		<div class="msg_caption">
			<span class="bigger">放大</span>
			<span class="smaller">缩小</span>
		</div>
		<div>
			<p id="para">
				这是一个明媚的早上，我吃过午饭前去招商银行办理公积金卡，下午不错洗洗衣服，开始写代码，人的一生就是不停的学习，很好，就是这样的。
			</p>
		</div>
	</div>	
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			$('.msg_caption span').bind('click', function(){
				var fsz = $('#para').css('font-size')  //16px
				var parsFsz = parseInt(fsz, 10); // 第二位参数，取整
				let cName = $(this).attr('class');
				let unit = fsz.slice(2)  // 默认从0开始数，数到2后面的截取出来
				if (cName==='bigger') {
					parsFsz+=2
				}
				else{
					parsFsz-=2
				}
				$('#para').css('font-size',parsFsz+unit)
			})
		})
	</script>
</body>
</html>

table toggle :contains 应用

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		.on{
			background-color: #fd5004;
		}
	</style>
</head>
<body>
	<label for="id">筛选</label>
	<input type="text" id="id" value="2">
	<table width="500" border="1">
		<thead>
			<tr><th>姓名</th><th>性格</th><th>住址</th></tr>
		</thead>
		<tbody>
			<tr class="parent" id="row_01"><td colspan="3">其他设计组</td></tr>
			<tr class="child_row_01"><td>王航</td><td>男</td><td>湖北</td></tr>
			<tr class="child_row_01"><td>王2航</td><td>女</td><td>湖北</td></tr>
			<tr class="child_row_01"><td>王航</td><td>男</td><td>湖北</td></tr>

			<tr class="parent" id="row_02"><td colspan="3">其他设计组</td></tr>
			<tr class="child_row_02"><td>王航</td><td>男</td><td>湖北</td></tr>
			<tr class="child_row_02"><td>王2航</td><td>女</td><td>湖北</td></tr>
			<tr class="child_row_02"><td>王航</td><td>男</td><td>湖北</td></tr>

			<tr class="parent" id="row_03"><td colspan="3">其他设计组</td></tr>
			<tr class="child_row_03"><td>王航</td><td>男</td><td>湖北</td></tr>
			<tr class="child_row_03"><td>王2航</td><td>女</td><td>湖北</td></tr>
			<tr class="child_row_03"><td>王航</td><td>男</td><td>湖北</td></tr>
		</tbody>
	</table>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			$('.parent').click(function(){
				$(this).toggleClass('on')
				.siblings('.child_'+this.id).toggle()
			})

			$('#id').keyup(function(){
				$('table tbody tr').hide()
				.filter(":contains('"+( $(this).val() )+"')").show()
			}).keyup()
		})
	</script>
</body>
</html>

ajax 实例

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.form1{
			width: 500px;
			margin: 100px auto;
		}
		label{
			display: block;
			width: 100%;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<input type="button" value="ajax提交" onclick="Ajax()">
	<div id="resTxt"></div>
	<div id="load">加载中。。。。</div>
	<hr/>
	<form action="test.php" class="form1" method="post">
		<label>姓名：<input type="text" name="user"></label>
		<label>内容：<textarea name="content" id=""></textarea></label>
		<input type="submit" value="提交" name="button">
	</form>
	<hr/>
	<input type="button" value="$.getScript" id="getScript">
	<hr>
	<input type="button" value="$.getJson" id="getJson">
	<div id="testjson"></div>
	<hr>
	<form action="" id="form2">
		<input type="checkbox" checked="true">12
		<input type="checkbox" checked="true">14
		<input type="radio">15
		<input type="radio">16
		<input type="submit" id="submit">
	</form>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			/*
			*ajax : 异步javascript XML
			*ajax  核心  XMLHttpRequest
			*load()  方法一般常用从服务器获取静态数据文件
				注意：
					get请求会将参数跟在URL后传递，post则是作为HTTP消息的实体内容发送给web服务器

					get通常不能大于2kb 数据会被浏览器缓存起来，会带来严重的安全性问题。

					$.ajax() 方法是jquery 最底层的Ajax

					对于表单提交数据多的情况下-----使用到序列化方法
					serialize()
					序列化数组----serializeArray()---返回json格式

			*/ 
			$('form').submit(function(event){event.preventDefault()});
			$("form input[type='submit']").click(function(){
				var url = $('.form1').attr('action');
				var serialize  = $('.form1').serializeArray();
				console.log(serialize)
				$.post(url, serialize, function(res, status){
					if (status==200) {
						console.log(res)
					}
				})
			})
		})

		function Ajax(){
			// $('#resTxt').load('moduleHtml.html');
			$('#load').ajaxStart(function(){
				$(this).show()
			})
			$('#load').ajaxStop(function(){
				$(this).hide()
			})
			$('#resTxt').load('moduleHtml.html .tab_menu', function(res, status, XMLHttpRequest){
				console.log(res);
				console.log(status);
			}); //load 选择器 选择对应的class
		}
		$(function(){
			$('#getScript').click(function(){
				$.getScript('jquery.cookie.js', function(data){
					console.log(data)
				})
			})
		})
		$(function(){
			// $('#getJson').click(function(){
			// 	$.getJSON('test.json', function(data){
			// 		$('#testjson').empty();
			// 		var html = '';
			// 		$.each(data, function(index,item){
			// 			console.log(index,item)
			// 			html+='<div><h6>'
			// 			+item['name']+'</h6><p>'
			// 			+item['age']+'</p></div>';
			// 			if (index ==2 ) {
			// 				return false
			// 			}
			// 		})
			// 		$('#testjson').html(html)
			// 	})
			// })

			$('#getJson').click(function(){
				$.ajax({
					type: 'get',
					url:'test.json',
					dataType: 'json',
					success:function(data){
						$('#testjson').empty();
						var html = '';
						$.each(data, function(i, item){
							html+= '<div><h2>'
							+item['name']+'</h2><p>'
							+item['age']+'</p></div>';
							if (i == 1) {
								return false;
							}
						})
						$('#testjson').html(html)
					}
				})
			})
		})

		
	</script>
</body>
</html>

jquery.cookie.js 实战应用

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link id="linkcss" rel="stylesheet" href="css/skin_01.css">
	<style>
		.select{
			background-color: #fff;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<ul class="color">
		<li id="skin_01">红色</li>
		<li id="skin_02">绿色</li>
		<li id="skin_03">橙色</li>
	</ul>

	用户名：<input type="text" name='username' id="username" />
	<input type="checkbox" name='check' id='check' />记住我
	<script src="jquery-1.8.2.min.js"></script>
	<script src="jquery.cookie.js"></script>
	<script>
		$(function(){
			let $li = $('.color li');
			var cookie_skin = $.cookie('skinName');
			if (cookie_skin) {
				$('#'+cookie_skin).addClass('slected').siblings().removeClass('slected');
				$('#linkcss').attr('href','css/'+cookie_skin+'.css');
			}
			$li.click(function(){
				var id = $(this)[0].id
				$('#'+id).addClass('slected').siblings().removeClass('slected');
				$('#linkcss').attr('href','css/'+id+'.css');
				$.cookie('skinName', id, {path: '/', expires: 10});
			})
		})

		$(function(){
			var cookie_name = 'username';
			if ($.cookie(cookie_name)) {
				if ($.cookie(cookie_name) == 'null') {
					$('#username').val('')
				}
				else{
					$('#username').val($.cookie(cookie_name))
				}
			}
			$('#check').click(function(){
				if (this.checked) {
					$.cookie(cookie_name, $('#username').val(), {path: '/', expires: 10});
				}
				else{
					$.cookie(cookie_name, 'null', {path: '/'})
				}
			})
		})
	</script>
</body>
</html>

input placeholder 兼容写法

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		.focus{
			color:#999;
		}
	</style>
</head>
<body>
	<input type="text" value="请输入商品名称">
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			$('input[type="text"]').focus(function(){
				$(this).addClass('focus')
				if ($(this).val()===this.defaultValue) {
					$(this).val('')
				}
			}).blur(function(){
				$(this).removeClass('focus');
				if ($(this).val()==='') {
					$(this).val(this.defaultValue)
				}
			}).keyup(function(e){
				if (e.which == 13) {
					alert('提交表单')
				}
			})
		})
	</script>
</body>
</html>

jQuery 插件编写 dom##

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		tbody>tr.odd{
			background-color: red;
		}
		tbody>tr.even{
			background-color: blue;
		}
		tbody>tr.selected{
			background-color: #fd5004;
		}
	</style>
</head>
<body>
	<div class="red" style="color:red">NIKO4</div>
	<hr>
	<table border="1" id="table1">
		<thead>
			<tr>
				<th></th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
		</tbody>
	</table>
	<table border="1" id="table2">
		<thead>
			<tr>
				<th></th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th><input type="checkbox" checked="true"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>
				<th>juzi</th>
			</tr>
			<tr>
				<th><input type="checkbox"></th>
				<th>lishijie</th>
				<th>wangzi</th>o
				<th>juzi</th>
			</tr>
		</tbody>
	</table>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		//;(function($){})(jQuery)
		/*jQuery.extend 用来设置默认参数
		**********/
		var setting = { validate: false, limit: 5, name: 'lishijie'}
		var options = { validate: true, name: 'wangzi'}
		var newOptions = jQuery.extend(setting, options)  
		//console.log(newOptions)

		;(function($){
			$.fn.extend({
				// 'color' :function(value){
				// 	return this.css('color', value);
				// },
				'alertBgColor':function(options){
					options = $.extend({
						odd: 'odd',
						even: 'even',
						selected: 'selected'
					}, options);
					$('tbody>tr:odd', this).addClass(options.odd);
					$('tbody>tr:even', this).addClass(options.even);
					$('tbody>tr', this).click(function(){
						var hasSelected = $(this).hasClass(options.selected);
						$(this)[hasSelected? 'removeClass' : 'addClass'](options.selected)
							.find(':checkbox').attr('checked', !hasSelected)
					})

					$('tbody>tr:has(:checked)', this).addClass(options.selected);
					return this //返回this , 使方法可链
				}
			})
		})(jQuery);

		$(function(){
			// $('.red').color('blue');
			$('#table2').alertBgColor({odd:'',even:'even', selected:'selected'}).find('th').css('color', 'green')
		})
	</script>
</body>
</html>

轮播图实战##

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>banner</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		img{
			width: 100%;
			height: 100%;
			display: block;
		}
		.banner{
			width: 550px;
			height: 320px;
			margin: 0 11px 0 0 ;
			overflow: hidden;
			position: relative;
		}
		.banner img{
			position: absolute;
			top:0;
			left:0;
		}
		.banner div{
			position: absolute;
			bottom: 0;
			overflow: hidden;
		}
		.banner div a{
			background: #444;
			display: inline-block;
			color: #fff;
			float: left;
			height: 32px;
			margin-right: 1px;
			overflow: hidden;
			padding: 5px 15px;
			text-align: center;
			width: 79px;
		}
		.banner div a:hover{
			text-decoration: none;
		}
		.banner div a.dor{
			background-color: #fd5004;
		}
		#footer a.dors{
			background-color: #fd5004;
		}
		.banner div a em{
			cursor: pointer;
			display: block;
			height: 16px;
			overflow: hidden;
			width: 79px;
		}
		.banner .last{
			margin: 0;
			width: 80px;
		}
		#imgWrap{
			display: block;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="banner">
		<a href="#nogo" id="imgWrap">
			<img src="./img/img-1.jpg" alt="1">
			<img src="./img/img-2.jpg" alt="2">
			<img src="./img/img-3.jpg" alt="3">
			<img src="./img/img-4.jpg" alt="4">
		</a>
		<div class="footer">
			<a href="###1" class="dor"><em>相约情人节</em><em>全场199元</em></a>
			<a href="###2"><em>相约情人节</em><em>全场199元</em></a>
			<a href="###3"><em>相约情人节</em><em>全场199元</em></a>
			<a href="###4" class="last"><em>相约情人节</em><em>全场199元</em></a>
		</div>
	</div>		
	<div id="footer">
		<a href="###1"><em>相约情人节</em><em>全场199元</em></a>
		<a href="###2"><em>相约情人节</em><em>全场199元</em></a>
		<a href="###3"><em>相约情人节</em><em>全场199元</em></a>
		<a href="###4"><em>相约情人节</em><em>全场199元</em></a>
	</div>
	<script src="jquery-1.8.2.min.js"></script>
	<script>
		$(function(){
			var imgRoll = $('.footer a');
			imgRoll.css('opacity','0.7');
			var len = imgRoll.length;
			var index = 0;
			var adTimer = null;
			imgRoll.mouseover(function(){
				index = imgRoll.index(this);
				showImg(index)
			}).eq(0).mouseover()  //-----------------------默认调用
			//划入停止动画 划出开始动画
			$('.banner').hover(function(){
				if (adTimer) {
					clearInterval(adTimer)
				}
			},function(){
				adTimer = setInterval(function(){
					showImg(index);
					index++;
					if (index==len) {
						index = 0;
					}
				},2500)
			}).trigger('mouseleave')  //-------hover 对应两个事件 mouseenter mouseleave 鼠标移出时调用第二事件

			$(document).on('hover','#footer a', function(){    //电商图片放大镜位置效果
				$(this).toggleClass('dors')
			})
		})
		//显示不同的幻灯片
		function showImg(index){
			var banner = $('.banner');
			var bannera = banner.find('.footer a')
			var newHref = bannera.eq(index).attr('href');
			$('#imgWrap').attr('href',newHref)
				.find('img').eq(index).stop(true,true).fadeIn().siblings().fadeOut();
			bannera.removeClass('dor').css('opacity','0.7').eq(index).addClass('dor').css('opacity','1')
		}

		// jquery 截取图片后缀方法实例

		$(function(){
			var imgSrc = $('#imgWrap').find('img').attr('src');
			console.log(imgSrc)
			var i = imgSrc.lastIndexOf('.')
			console.log(i)
			var unit = imgSrc.substring(i)
			console.log(unit)
		})
	</script>
</body>
</html>

jquery 性能优化

缓存对象
如果打算在其他函数中使用jquery 对象，可以缓存到全局环境
循环数组尽量使用简单的for 会使代码运行的更快
循环dom 结束后再操作，比如结束后再追加
尽量使用原生js

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{
			margin: 0;
			padding:0;
		}
		ul li{
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<li>jijijihaoni</li>
		<li>jijijihaoni</li>
		<li>jijijihaoni</li>
		<li>jijijihaoni</li>
	</ul>

	<input type="checkbox" checked="true"> 1
	<script src="jquery-1.8.2.min.js"></script>
	<script>
			window.$my = {
				head: $('head'),
				body: $('body')
			}
			// jquery 性能优化

			/*
			*  1. 缓存对象
			*  2. 如果打算在其他函数中使用jquery 对象，可以缓存到全局环境
			*  3. 循环数组尽量使用简单的for 会使代码运行的更快
			*  4. 循环dom 结束后再操作，比如结束后再追加
			*  5. 尽量使用原生js 
			*/

			//2
			var script = document.createElement("li");
			$my.body.append(script);

			$('ul').click(function(e){
				var targera = $(e.target)
				console.log(targera)
				var js = targera.get(0);
				js.style.color = 'red';
				this.style.backgroundColor = '#fd5004'
			})
			var cr = $('input:checkbox');
			var newCr = cr[0]
			if (newCr.checked) {
				alert(1)
			}
	</script>
</body>
</html>

返回页面顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .nav{
            margin-top: 600px;
            width:100%;
            border-right-color: goldenrod;
            height: 200px;
        }
        .content{
            margin-top: 1200px;
            width:100%;
            height: 300px;
            background-color:firebrick;
        }
        .go{
            width: 100%;
            height: 20px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="nav"></div>
    <div class="content"></div>
    <div class="go">返回页面顶部</div>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        $(function(){
            $('.go').click(function(){
                $('body').scrollTo(500);
                return false;
            })
        })
        jQuery.fn.scrollTo = function(speed){
            var targetOffset = $(this).offset().top;
            $('html,body').stop().animate({scrollTop: targetOffset}, speed);
            return this;
        }
    </script>
</body>
</html>

自动隐藏不再使用定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自动隐藏 不再使用定时器</title>
    <style>
        .move{
            width: 100%;
            height: 200px;
            display: none;
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <div class="go">go</div>
    <div class="move">
        hah
    </div>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        $(function(){
            $('.go').click(function(){
                $('.move').fadeIn(500).delay(3000).fadeOut(500)
            })
            
        })
    </script>
</body>
</html>

kingrome2009

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
《锋利的 jQuery（第2版）》

jquery与其他库相冲突var $j = JQuery.noConflict();// 如果table下tbody中的每一行下的每一列的checkbox没有禁选$('#table&amp;amp;amp;amp;gt;tbody&amp;amp;amp;amp;gt;tr:has(td:has(:checkbox:enabled))').css('background':'red');domva
复制链接

扫一扫