迁移其他jquery文章之一

乐之者java

于 2021-05-12 11:12:25 发布

阅读量284

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116699821

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

一、jquery的dom操作之插入节点

内部插入节点

select.append(content/select)

向每个匹配的元素尾部追加内容

select.appendTo(select)

把所有匹配的元素追加到指定的select的尾部

select.prepend(content/select)

select.prependTo(select)

外部插入节点

select.after(content/select)

在每个匹配的元素之后插入内容

select.before(content/select)

select.insertAfter(select)

和after写法颠倒

select.insertBefore(select)

示例：

 <p id="p1" abc="haah">我是一个段落</p>
<input type="button" value="内部插入练习" id="inner">    
 <div id="append">已有内容</div>

 $("#inner").click(function(){
		$("#append").append("abc");
		$("#append").append("<div><b>abc</b></div>");
		$("#append").append($("#p1"));
		
		
		$("#p1").appendTo($("#append"));
		$("p").appendTo($("#append"));
		$("<div><b>abc</b></div>").appendTo($("#append"));
		
		$("#append").after(123);
	});

示例2：

删除节点：

$(“p”).empty():清空p的子元素

$(“p”).remove():p以及其子元素都被干掉

内部1：

<p>I would like to say: </p>

执行：$("p").append("<b>Hello</b>");//prepend

<p>I would like to say: <b>Hello</b></p>

内部2：

<p>I would like to say: </p>

执行：$("p").appendTo("div");

<div><p>I would like to say: </p></div>

外部1：

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").after("<b>Hello</b>");

结果:

<p>I would like to say: </p><b>Hello</b>

外部2：

HTML 代码:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代码:

$("p").insertBefore("#foo");

结果:

<p>I would like to say: </p><div id="foo">Hello</div>

二、jquery删除节点remove和empty

删除节点

empty()

删除所有后代元素，自身不删除

remove([expr])

自身也被删除

即：

$(“p”).empty():清空p的后代所有元素

$(“p”).remove():p以及其后代元素都被干掉

三、jquery的clone方法

clone([boolean])：克隆匹配的DOM元素并且选中这些克隆的副本,在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用.boolean为true时表示深度复制，即连带事件一起复制

比如有如下html代码：

<b>Hello</b><p>, how are you?</p>

执行：

$("b").clone().prependTo($("p"));

结果：

<b>Hello</b><p><b>Hello</b>, how are you?</p>

再比如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用属性方法</title>
</head>

<body>
<button>Clone Me!</button>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
	//去掉true后则新增的按钮不具备点击事件
	  $(this).clone(true).insertAfter(this);
	});
});
</script>
</html>

执行结果如图：

可以看到，不管我点击任何按钮都可以自己复制自己，这是因为clone(true)表示深度复制，会连带事件本身一起复制

四、jquery属性操作attr和prop以及attr和data的区别

属性操作

attr(key[,value])：返回或设置被选元素的属性值,操作自定义属性

prop(key[,value])：返回或设置被选元素的属性值，操作固有属性

removeAttr(name):移除掉属性

removeProp(name):移除掉属性

这里面最需要注意的就是attr和prop的区别，比如下面这段代码

<p id="txt" uuid="abcde3456ggg">我是一个段落</p>

这个时候，id是html标签的固有属性，如果我们想要操作或者获取它，一般都是用prop("id"),而uuid是自定义属性，一般使用attr。

下面是个例子，相信你为它苦恼过：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用属性方法</title>
</head>
<body>
<h3>爱好</h3>
<input type="checkbox" name="fav" value="foot">足球
<input type="checkbox" name="fav" value="basketball">篮球	 
<input type="button" value="反选" id="fanxuan">
<h3>性别</h3>
<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女	  
<input type="button" value="得到当前选中的" id="get">    
    <h3>国别</h3>
<select name="coun">
	<option value="china">中国</option>
	<option value="us">英国</option>
</select>
 <input type="button" value="得到当前选中的国家" id="getCountry">         
 <hr>
 <a id="link" href="https://www.baidu.com/">我是一个超链接</a>
 <input type="button" value="改变超链接" id="changa">     
 
 
 <p id="p1" abc="haah">我是一个段落</p>
 
</body>
</html>

jquery代码：

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">

$(function(){
	
	$("#p1").click(function(){
		console.log($(this).attr("abc"));//haah
		console.log($(this).prop("abc"));//undefined,因为prop用来操作固有属性
	});

//复选框反选
	$("#fanxuan").click(function(){
	    var ck=$(":checkbox");
		for(var i=0;i<ck.length;i++){
			console.log($(ck[i]).prop("checked"));//结果：fasle或者true
			console.log($(ck[i]).attr("checked"));//undefined，因为attr用来操作自定义属性
			if($(ck[i]).is(":checked")){
			//这里一定要用prop，因为checked是固有属性，需要用prop来操作，用attr将会不成功
				$(ck[i]).prop("checked",false);
			}else{
				$(ck[i]).prop("checked",true);
			}
		}
	});
	//输出所有单选按钮的选中状态
	$("#get").click(function(){
	    var radios=$(":radio");
		for(var i=0;i<radios.length;i++){
			console.log($(radios[i]).prop("checked"));//结果：fasle或者true
			console.log($(radios[i]).attr("checked"));//undefined，因为attr用来操作自定义属性
		}
	});
	//输出所有下拉项是否被选中
	$("#getCountry").click(function(){
	    var options=$("option");
		for(var i=0;i<options.length;i++){
			console.log($(options[i]).prop("selected"));//结果：fasle或者true
			console.log($(options[i]).attr("selected"));//undefined，因为attr用来操作自定义属性
		}
	});
	
	//移除属性：注意这个时候如果想正确移除，就需要用removeAttr了，这个虽然是操作固有属性
	//但是比较特殊，就当做特殊情况来记住就行了
	$("#changa").click(function(){
			//结果：<a id="link">我是一个超链接</a>
			$("#link").removeAttr("href");
			
			//结果：<a id="link" href="undefined">我是一个超链接</a>
			//$("#link").removeProp("href");
	});
	
});
</script>

页面效果：

执行结果，我都写在了注释里面，大家看一下就行了。

今天来说说attr与jquery中data方法的区别。

首先，他俩都是jquery中的方法。因为并不是单独说data方法的用法，而是说说attr和data方法的区别，因此，data方法的语法与功能就不多做介绍了。

下面这个例子，有这样一段html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery中.attr和.data的区别</title>
  </head>
  <body>
    <p id="app" data-test="default_value"></p>
  </body>
  <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>

以及一段JavaScript代码：

<script type="text/javascript">
	console.log("获取以data-开头的属性的值");
    var attr_get1 = $('#app').attr('data-test');
    var data_get1 = $('#app').data('test');//data方法默认获取的属性格式data-xxx，只需要写xxx即可
    console.log('attr_get1: ' + attr_get1); //default_value
    console.log('data_get1: ' + data_get1); //default_value
	
	console.log("attr方法设置属性的值");
    $('#app').attr('data-test', 'setByAttr'); //$.attr真正的去操作(设置)DOM元素的data-test属性的值
    var attr_get2 = $('#app').attr('data-test');
    var data_get2 = $('#app').data('test');
    console.log('attr_get2: ' + attr_get2); //setByAttr
    console.log('data_get2: ' + data_get2); //default_value
	
	console.log("data方法设置属性的值");
    $('#app').data('test', 'setByData'); //$.data 设置的是jquery相应对象的属性，不涉及dom操作
    var attr_get3 = $('#app').attr('data-test');
    var data_get3 = $('#app').data('test');
    console.log('attr_get3: ' + attr_get3); //setByAttr
    console.log('data_get3: ' + data_get3); //setByData
  </script>

执行结果：

总结一下：

$(...).attr()都是从真正的DOM元素中取值或者设置值的，即和视图中标签内的属性值保持一致，比如$.attr('data-foo')会从标签内获得属性名为data-foo的属性值；$.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；

$.data()是向Jquery对象中取值或者设置值，由于对象属性值保存在内存中，因此和视图里的属性值不一致是很常见的。 $.data('foo')会从 Jquery对象内获得foo的属性值，不是从标签内获得data-foo属性值； $.data('foo', 'world')会将字符串'world'塞到 Jquery对象的'foo'属性中，而不是塞到视图标签的data-foo属性中。

$.attr()和$.data()应避免交叉使用，即attr设置值，而去使用data获取或者data设置值，而使用attr去取值都是应该避免的。

从性能的角度来说，因为$.data()只是操作内存中的 Jquey对象，并没有真正的DOM操作，因此速度更快。

五、jquery里addClass等样式操作方法

jquery样式操作

css(name,[val]):获取或设置某个css属性，参数也可是对象

addClass(class) ：为匹配的元素添加类名

removeClass([class]) ：移除类名

toggleClass(class)：如果存在（不存在）就删除（添加）一个类

hasClass(class)

参数class：指的是一个或多个要添加到元素中的CSS类名(不带.)，多个的时候使用空格分开

针对这几个jquery中样式操作的方法，我也写了个小例子，如下：

html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>树形菜单</title>
<style>
*{
	margin:0;
	padding:0;
}
	ul{
		list-style:none;
		font-family:"微软雅黑";
		font-size:12px;
		color:blue;
	}
	li{
		line-height:1.5;
		cursor:pointer;
	}
   .parent{
		padding-left:35px;
		background:  url("close.gif") no-repeat 0px 0px;
	}
	.parentOpen{
		background:  url("open.gif") no-repeat 0px 0px;
	}
	.sub{
		display:none;
	}
	.subShow{
		display:block;
	}
	.sub li{
		padding-left:17px;
		background: url("leaf.gif") no-repeat 0px 0px;
	}
</style>

</head>

<body>
		<ul>
			<li class="parent">移动开发
				<ul class="sub">
					<li>Andriod</li>
					<li>iOS</li>
					<li>微信开发</li>
					<li>移动支付</li>
				</ul>
			</li>
		    <li class="parent">云计算
				<ul class="sub">
					<li>云安全</li>
					<li>云存储</li>
					<li>开发平台</li>
					<li>华为云计算</li>
				</ul>
			</li>
		    <li class="parent">大数据
				<ul class="sub">
					<li>hadoop</li>
					<li>spark</li>
					<li>redis</li>
				</ul>
			</li>
			<li  class="parent">java技术
				<ul class="sub">
					<li>javaSE基础</li>
					<li>开源框架</li>
					<li>常用工具</li>
				</ul>
			</li>
			<li  class="parent">php技术
				<ul class="sub">
					<li>php基础</li>
					<li>php高级</li>
					<li>php框架</li>
				</ul>
			</li>
			<li  class="parent">网页前端
				<ul class="sub">
					<li>html</li>
					<li>css</li>
					<li>jQuery</li>
				</ul>
			</li>		
		</ul>
</body>
</html>

jquery代码：

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
   		$(".parent").click(function(){
			$(this).toggleClass("parentOpen");
			$(this).find(".sub").toggleClass("subShow");
		});
});
</script>

六、jquery中尺寸相关方法width、innerWidth、outerWidth比较

height([val]) ：元素内容，也适用于window和document的计算。

//当网页未撑满窗口时：
$(document).height() //等价于$(window).height()
//当网页比窗口大且拉到最顶端时：
$(document).height() //等价于$(window).height() + $(window).scrollTop()

width([val]):获取或设置宽度

innerHeight()

innerWidth() :元素宽度+padding,与outer都不适用于window和document,调用者只能是元素

outerHeight()

outerWidth(true/false):false时：元素内容+padding+border(元素的宽度),true时元素空间的宽度：元素内容+padding+border+margin

这几个方法的验证代码：

供操作的html结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css操作位置与尺寸</title>
<style>
*{
	margin:0;padding:0;
}
#div1{
	width:100px;
	height:3000px;
	background:darkgreen;
}
#div2{
	width:200px;
	height:300px;
	padding:20px;
	border:1px solid orange;
	margin:30px;
	background:pink;
}
#div2container{
	border:3px solid red;
	padding:90px;
	position:relative;
}
</style>

</head>

<body>
<div id="div1"></div>
<div id="div2container">
	<div id="div2">我是div2</div>
</div>

</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>

jquery代码：

<script type="text/javascript">

$(function(){
//尺寸
	var height=$("#div2").height();
	var width=$("#div2").width();
	
	var innerHeight=$("#div2").innerHeight();
	var innerWidth=$("#div2").innerWidth();
	
	var outerHeight=$("#div2").outerHeight();
	var outerWidth=$("#div2").outerWidth();
	
	var outerHeight2=$("#div2").outerHeight(true);
	var outerWidth2=$("#div2").outerWidth(true);
	
	console.log("height:"+height);//300
	console.log("width:"+width);//200

	console.log("innerHeight:"+innerHeight);//300+40
	console.log("innerWidth:"+innerWidth);//200+40

	console.log("outerHeight:"+outerHeight);//300+40+2
	console.log("outerWidth:"+outerWidth);//200+40+2

	console.log("outerHeight2:"+outerHeight2);//300+40+2+60
	console.log("outerWidth2:"+outerWidth2);//200+40+2+60
	//位置
	var offset=$("#div2").offset();//offset.x=左上角的e.pageX（3+90+30）      offset.y=e.pageY（3000+3+90+30）
	console.log(offset);
	var position=$("#div2").position();//父元素不定位：position.x=左上角的e.pageX-左上角的margin-left（即3+90） 
	//position.y=左上角的e.pageY-左上角的margin-top（即3000+3+90）
	//父元素定位：position.x=左上角到父元素左边框的距离（90）   position.x=左上角到父元素上边框的距离（90）
	console.log(position);
});
</script>

运行结果：

七、jquery实现跑马灯特效

跑马灯一般也叫作marquee，html里面也有这个标签，但是功能有限，我们在浏览网站的时候常常看到如下所示的页面效果：

上面的这种效果就叫做“跑马灯”了，我们看看使用jquery是怎么实现的：

先看看html的结构，之所以html比较多，是为了看到效果，没有什么业务逻辑：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
</head>
<body>
  <table class="datatable-head">
    <thead>
      <tr>
        <td>日期</td>
        <td>时间</td>
        <td>银行名称</td>
        <td>账号</td>
        <td>出入账名称</td>
        <td >金额</td>
        <td>对方国别</td>
        <td >交易性质名称</td>
      </tr>
    </thead>
  </table>
  <div id="marquees">
    <table id="datatable" class="datatable">
      <tbody>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:30:08</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTN9884554100002014</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">2,199,975.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:30:08</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTN9884554100002001</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">14,447,235.82</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">货物</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:30:08</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTN9884554100002001</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">14,447,235.82</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:30:08</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTN9884554100002014</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">2,199,975.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:30:04</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTN9830554100001014</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">70,227.16</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:18</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9843553000000614</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">364,727.28</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:18</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9843553000000614</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,605,934.60</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:18</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9843553000000614</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,778,174.93</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:06</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814553000000301</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,000,000,000.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">货物</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:06</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814553000000301</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,000,000,000.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">货物</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:02</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814552600000214</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">8,457.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:02</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814552600000214</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">7,228.80</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:02</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814552600000214</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">9,590.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:29:02</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9814552600000214</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">15,665.04</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:28:43</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9799539000001601</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,547,058.94</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">因金融衍生工具交易引起的收入/因金融衍生工具交易引起的支出</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:28:43</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9799539000001601</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">1,528,818.94</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">因金融衍生工具交易引起的收入/因金融衍生工具交易引起的支出</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:28:43</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9804545000000114</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">92,000.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:28:43</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9804545000000114</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">96,000.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">09:28:43</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海浦东发展银行上海分行</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE9804545000000114</td>
		  <td class="xl68" style="border-top:none;border-left:none">出账</td>
		  <td class="xl69" style="border-top:none;border-left:none">9,770.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">香港</td>
		  <td class="xl68" style="border-top:none;border-left:none">一般贸易</td>
		 </tr>
		 <tr>
		  <td height="19" class="xl67" align="right" style="height:14.25pt;border-top:none">2016-6-1</td>
		  <td class="xl68" style="border-top:none;border-left:none">08:41:22</td>
		  <td class="xl68" style="border-top:none;border-left:none">上海电气财务公司（上海）</td>
		  <td class="xl68" style="border-top:none;border-left:none">FTE3105016536000000000501</td>
		  <td class="xl68" style="border-top:none;border-left:none">入账</td>
		  <td class="xl69" style="border-top:none;border-left:none">6,200,000.00</td>
		  <td class="xl68" style="border-top:none;border-left:none">中国</td>
		  <td class="xl68" style="border-top:none;border-left:none">最后一行财务公司集团内部上存/下划</td>
		 </tr>
      </tbody>
    </table>
    <table id="scroller" class="datatable"></table>
  </div>

<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</body>
</html>

下面是用到的css样式：

<style>
*{
	margin:0;
	padding:0;
}
.datatable {
	width: 100%;
	height:auto;
	text-align:left;
	table-layout:fixed;
}

.datatable tr {
	line-height: 1.8em;
}

.datatable tr>td {
	font-size:12px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.datatable tr:nth-of-type(2n) { 
	background-color:#eaf3ff;
}

.datatable tr:nth-of-type(2n+1){
	background-color:#f6f9fe;
}

.datatable tr.selected {
	background-color:#FF9900;
}

#marquees {
	overflow: auto;
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;
}

#scroller {
	height:auto;
	text-align:left;
}

.datatable-head {
	width: 100%;
	height:auto;
	text-align:center;
	table-layout:fixed;
}
.datatable-head tr {
	background-color: #d5e6fc;
	line-height: 2em;
}
.datatable-head td {
	font-size:12px;
	font-weight: bold;
}
</style>

实现跑马灯效果的jquery代码：

<script type="text/javascript">
		var marqueesDiv = $("#marquees");//包括datatable和scroller
		var ognTable = $("#datatable");//table
		var otherTable = $("#scroller");//table
		var MyMar;
		otherTable.html("<hr>"+ognTable.html());
		//不让要滚动的东西一下展示完
		marqueesDiv.height($(window).height()-38);
		function Marquee(){
			console.log(marqueesDiv.scrollTop());
			if(marqueesDiv.scrollTop()>=ognTable.height()){
				console.log("归零");
				marqueesDiv.scrollTop(0);
			} else{
				console.log("增加");
				marqueesDiv.scrollTop(marqueesDiv.scrollTop()+1);
			}
		}

		 MyMar=setInterval(Marquee,75);
		 marqueesDiv.mouseover(function(){clearInterval(MyMar)});
		 marqueesDiv.mouseout(function(){MyMar=setInterval(Marquee,75)});
  </script>

这个例子涉及到的jquery操作dom元素位置的核心方法是scrollTop()，怎么理解这个方法呢？

obj.scrollTop([val]) ：相当于js里面的scrollTop,返回值：obj里面的元素在垂直方向上偏移出obj的像素数

另外jquery中还有几个方法也是跟操作dom元素位置有关的：

obj.offset([obj]) :有top和left两个属性，分别相当于上边框的e.pageY和左边框的e.pageX,不管该元素或其祖先元素如何定位

obj.position() ：有top和left两个属性,如果obj的祖先元素是默认定位，那么等同于offset-margin，否则就是针对离obj最近的那个非默认定位的祖先元素的相对偏移量

scrollLeft([val]):水平滚出的距离

八、jquery方法之过滤

eq(index|-index):获取第index个

first():获取第一个

last():获取最后一个

is(select):检查元素集合是否匹配select，如果其中至少有一个元素符合这个给定的表达式就返回true。比如 $(this).find(":checkbox").is(":checked")

filter(select):从集合里筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式,返回的是自身

has(select):筛选出含有特定后代元素的集合,返回的是自身

针对如下html结构：

<ul>
		<li>1</li>
		<li class="a">2</li>
		<li class="a">3</li>
		<li>4<span>33</span></li>
	</ul>

作如下测试：

<script type="text/javascript">

$(function(){
//	$("li").filter(".a").css("background","red");
//	$("li").has("span").css("background","red");

//判断是否是某个元素点击
	
	$("li").click(function(evt){
		var t= $(event.target);
		console.log(t);
		if(t.is("li")){
			$(this).css("background","red");
		}
	});
});
</script>

执行结果，当点击li时会变红：

好了，上面就是jquery中的几个过滤方法的用法，希望能解你之惑吧。

九、jquery中串联方法add,contents与end

解释：

add(expr|ele|html|obj[,con]):把与表达式匹配的元素添加到jQuery对象中

contents():查找匹配元素内部所有的子节点（包括文本节点）。

end():回到最近的一个"破坏性"操作之前,所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作

空洞的解释终究难于理解，我们来举几个例子，现在有下面的html结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>串联</title>
</head>
<body>
	<section>
		这是<p>Hello</p><div>Hello Again<a href="http://www.baidu.com">百度</a></div>内容
		<div id="hasstrong"><strong>strong</strong></div>
	</section>
</body>
</html>

页面的展现效果是这样的：

一、编写如下jquery代码：

$("p").add("div").css("border","1px solid red");

效果如图：

修改jquery代码：

$("p").css("border","1px solid red").add("div").css("color","green");

效果如下：

通过这两个例子能理解“add(expr|ele|html|obj[,con]):把与表达式匹配的元素添加到jQuery对象中”这句话的意思了吧。

二、编写jquery代码实现如下功能：找到section下面的文本并用<b>包围

这个功能的实现我们可以使用contents()方法，：

$("section").contents().filter(function(){
		console.log(this);//content会按节点类型（元素、文本、注释）把子元素（注意：是子元素）分割成一个个的this
		return this.nodeType==3;
	}).wrap("<b></b>")

执行结果如下：

三、再次巩固下contents()方法，需求：找到含有strong标签的div，并打印

	var d=$("div").filter(function(){
		return $(this).find("strong").length==1;
	});
	console.log(d);

结果：

四、最后来看一下end方法，它是干什么的呢？

结合上边的解释“回到最近的一个"破坏性"操作之前,所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作”，jquery的end()方法是为了在一句代码内能完成多件事情而使用的。如下面的代码：

//为了使用一句话能完成多件事情使用end(),这里调用end()后相当于返回到了$("section")这个状态
	$("section").find("p").css("border","1px solid red").end().find("div").css("color","red");

页面效果改变成了这样：

好了，经过这几个案例，相信你对jquery的串联操作涉及到的三个方法add,contents(),end()有了更深一层的了解了吧。

十、jquery实现轮播图效果

轮播图特效演示：

案例打包下载地址：https://pan.baidu.com/s/1MLW67wpWgZ8jMzY0g83v8g

轮播图也是最最常见的网页特效之一，以下是实现这种效果的源代码分享。

html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
</head>
<body>
	   <div class="midfocus">
            <img src="focus1.jpg">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
            <ol>
                <li class="crtli">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>   
            </ol>
        </div>
</body>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
</html>

css:

<style>
	 .midfocus{
		width:790px;
		height:330px;
		border:0;
		position:relative;/*为了他后边的箭头和数字ol使用绝对定位*/
	}
	 .midfocus img{
		width:790px;
		height:330px;
	}
	 .midfocus span{
		display:block;
		width:40px;
		height:60px;
		background:rgba(0,0,0,0.4);
		text-align:center;
		line-height:60px;
		font-size:24px;
		font-weight:bold;
		cursor: pointer;
	}
	 .midfocus  span.left{
		position:absolute;
		top:134px;
		left:0px;
	}
	 .midfocus  span.right{
		position:absolute;
		top:134px;
		right:0px;
	}
	
	 .midfocus  ol{
		list-style:none;
		width:240px;
		height:25px;
		position:absolute;
		bottom:10px;
		right:10px;
	}
	 .midfocus  ol li{
		width:25px;
		height:25px;
		background:white;
		border:1px solid gold;
		text-align:center;
		line-height:25px;
		float:left;
		margin-left:2px;
		cursor: pointer;
	}
	 .midfocus  ol .crtli{
		background:red;
	}
</style>

jquery:

<script type="text/javascript">

$(function(){
   		function getCrtImgNum(){
   			var src=$(".midfocus img").attr("src");
			var reg=/\d{1}/g;
			var srcNum=reg.exec(src)[0];
        	srcNum=parseInt(srcNum);
        	return srcNum;
   		}
        function rightClick(){
        	var srcNum=getCrtImgNum();
        	if (srcNum==8) {
        		srcNum=1;
        	}else{
        		srcNum=srcNum+1;
        	}
        	changeImgAndClass(srcNum);
        }
		function leftClick(){
        	var srcNum=getCrtImgNum();
        	if (srcNum==1) {
        		srcNum=8;
        	}else{
        		srcNum=srcNum-1;
        	}
			changeImgAndClass(srcNum);
        }
		function changeImgAndClass(finalNum){
			$(".midfocus img").attr("src","focus"+finalNum+".jpg");
			$(".midfocus li").siblings().removeClass("crtli");
			$(".midfocus li").eq(finalNum-1).addClass("crtli");
		}
		//自动切换
        var handler=setInterval(rightClick,4000);
		//点数字切换
        $(".midfocus li").click(function(){
        	 var clickNum=$(this).text();
			 $(".midfocus img").attr("src","focus"+clickNum+".jpg");
			 $(".midfocus li").siblings().removeClass("crtli");
			 $(this).addClass("crtli");
        });
		//点左边按钮切换
         $(".midfocus .left").click(function(){
		   leftClick();
         });
		//点右边按钮切换
        $(".midfocus .right").click(function(){
        	rightClick();
        });
});
</script>

这里涉及到了jquery里面查找元素的几个方法，我们顺便一起把他们的用法说明一下。

jquery查找元素常用方法：

children([select])：找到[符合条件的]子元素

next([select]):下一个同辈元素

prev([select]):上一个同辈元素

siblings([select]):$("div").siblings()获取与div同辈的元素，不管是在前面还是在后边

find(expr|obj|ele)：参数可以是选择器|可以是jQuery对象|dom元素，找出后代元素

parent([expr]) :找到父元素

parents([expr]) ：找到祖先元素

nextAll([select]):下边所有同辈元素

prevAll([select]):上边所有同辈元素

结合上面的轮播图实例，好好理解一下这几个方法吧。