从零开始玩转jquery

BeiLingI

于 2020-10-03 17:09:44 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/BeiLingI/article/details/108799260

版权

从零开始玩转jquery

一、jquery的基本概念

1、jquery是什么

jQuery是一个JavaScript函数库，它是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2、如何安装jquery

1）从 jquery.com 下载 jQuery 库
引用方式：

<head>
	<script src="jquery-1.10.2.min.js"></script>
</head>

2）通过 CDN（内容分发网络）引用它
引用方式：

<head>
<	script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

3、jquery的语法

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

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

4、jquery版本

1） 1.x 支持IE 6、7、8，但是已经不再更新
2） 2.x 不支持老浏览器，停止更新
3） 3.x 不支持老浏览器，还在更新

二、jquery选择器

1、元素选择器

jQuery 元素选择器基于元素名选取元素。

$("p")

2、#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$("#test")

3、.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素

$(".test")

4、并集选择器

$("div,p,li")

5、交集选择器

$("div.redClass")

6、子代选择器

$("ul>li")

7、后代选择器

$("ul li")

8、其他

$("*")	//选取所有元素
$(this)	//选取当前 HTML 元素
$("p.intro")//选取 class 为 intro 的 <p> 元素
$("p:first")//选取第一个 <p> 元素
$("ul li:first")//选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")//选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	//选取带有 href 属性的元素
$("a[target='_blank']")//选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")//选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")//选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")//选取偶数位置的 <tr> 元素
$("tr:odd")	//选取奇数位置的 <tr> 元素
$("tr:eq(index)")	//选取索引为index的<tr> 元素

三、jquery事件

在这里插入图片描述

1、鼠标事件

1）click()
click() 方法是当按钮点击事件被触发时会调用一个函数。

$("p").click(function(){
	$(this).hide();
});

2）dbclick()
当双击元素时，会发生 dblclick 事件。

$("p").dblclick(function(){
	$(this).hide();
});

3）mouseenter()
当鼠标指针穿过元素时（不包含子元素），会发生 mouseenter 事件。

$("#p1").mouseenter(function(){
	alert('您的鼠标移到了 id="p1" 的元素上!');
});

4）mouseleave()
当鼠标指针离开元素时（不包含子元素），会发生 mouseleave 事件。

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

5）mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

6）mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

7）hover()
hover()方法用于模拟光标悬停事件。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

8）focus()
当元素获得焦点时，发生 focus 事件。

$("input").focus(function(){
 	$(this).css("background-color","#cccccc");
});

9）blur()
当元素失去焦点时，发生 blur 事件。

$("input").blur(function(){
 	$(this).css("background-color","#ffffff");
});

10）mouseover()
当鼠标指针穿过该元素及其子元素时），会发生 mouseover 事件。

$("#p1").mouseover(function(){
    alert('您的鼠标移到了 id="p1" 的元素及其子元素上!');
});

11）mouseout()
当鼠标指针离开该元素及其子元素时），会发生 mouseout 事件。

$("#p1").mouseout(function(){
    alert("再见，您的鼠标离开了该段落及其子元素上。");
});

2、键盘事件

1、keydown()
键盘按下时触发keydown事件

$("dom对象").keydown()

2、keypress()
键盘被按下时触发keypress事件

$("dom对象").keypress()

3、keyup()
键盘被松开时触发keyup事件

$("dom对象").keyup()

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。

3、表单事件

1、submit()
当提交表单时，会发生 submit 事件

$("dom对象").submit(function)

2、change()
当元素的值改变时发生 change 事件（仅适用于表单字段）

$("dom对象").change(function)

4、文档\窗口事件

1、load()
当指定的元素已加载时，会发生 load 事件。

$("dom对象").load(function)

2、resize()
当调整浏览器窗口大小时，发生 resize 事件。

$(window).resize(function)

3、scroll()
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$("dom对象").scroll(function)

4、scrollLeft和()scrollTop()

$("dom对象").scrollLeft(number)//被卷出去的宽度
$("dom对象").scrollHeight(number)//被卷出去的高度

可选参数number是设置值

四、jquery效果

1、隐藏和显示

1）隐藏 hide()

$("dom对象").hide(speed,callback);

2）显示 show()

$("dom对象").show(speed,callback);

3）切换 toggle()

$("dom对象").toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 、”normal“或毫秒，如果没给该参数则没有动画效果。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2、淡入淡出

1）淡入 fadeIn()

$("dom对象").fadeIn(speed,callback);

2）淡出 fadeOut()

$("dom对象").fadeOut(speed,callback);

3）切换 fadeToggle()

$("dom对象").fadeToggle(speed,callback);

在淡入淡出之间切换
4）渐变 fadeTo()

$("dom对象").fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是该函数完成后所执行的函数名称。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

3、滑动

1）向上 slideDown()

$("dom对象").slideDown(speed,callback);

2）向下 slideUp()

$("dom对象").slideUp(speed,callback);

3）切换 slideToggle()

$("dom对象").slideToggle(speed,callback);

4、动画 animate()

$("dom对象").animate({params},speed,'linear\swing',callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的第三个参数，linear代表匀速，swing为默认不匀速。
可选的 callback 参数是动画完成后所执行的函数名称。
1）操作单个属性

$("div").animate({left:'250px'});

2）操作多个属性

$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
});

3）使用相对值

$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'  //+=
});

4）使用预定义的值

$("div").animate({
    height:'toggle'//值可以实hide、show、toggle
});

5）使用队列功能

div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");

写成队列形式会逐步执行。

5、停止动画 stop()

$("dom对象").stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

五、jquery HTML\CSS

1、获取内容和属性

1）text() 设置或获取所选元素的文本内容

$("dom对象").text();//获取文本
$("dom对象").text("文本");//设置文本

2）html() 设置或获取所选元素的内容（包括 HTML 标记）

$("dom对象").html();//获取html内容
$("dom对象").text("html内容");//设置html内容。会覆盖所有html
内容

3）val() 设置或获取表单字段的值

$("dom对象").val();//获取值
$("dom对象").val("值");//设置值

4)attr() 设置或获取属性

$("dom对象").attr("属性");//获取属性
$("dom对象")attr("属性","值");//设置属性

2、添加和删除属性

1）append() 在被选元素的结尾插入内容

$("dom对象").append("追加文本");//追加一个文本

var txt1="<p>文本-1。</p>";// 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本-2。");// 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本-3。"; //使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);// 追加多个文本

2）prepend() 在被选元素的开头插入内容

$("dom对象").prepend("在开头追加文本");

3）after() 在被选元素之后插入内容

$("dom对象").after("在后面添加文本");

4）before() 在被选元素之前插入内容

$("img").before("在前面添加文本");

prepend()、after() 、before() 可以像append()一样添加一个和多个元素，append()和prepend()是将添加的文字添加在内部，而before()和after()时添加在外部.
5)remove() - 删除被选元素（及其子元素）

$("dom对象").remove();

remove()中的参数如果为选择器的话则可以对应删除。
6)empty() - 从被选元素中删除子元素

$("dom对象").remove();

7）appendTo 将某个选择器元素转到另一个选择器

$("dom对象").appendTo("dom对象");

8）clone() 克隆某一节点

$("dom对象").clone()

可以写参数true和false，区别是true会将对应事件一起克隆下来。

3、获取或设置类

1)添加类 addClass();

$("dom对象").addClass("类名");//添加单个类
$("dom对象").addClass("类名 类名");//添加多个类

2)移除类 removeClass()

$("dom对象").removeClass("类名");//移除单个类
$("dom对象").removeClass("类名 类名");//移除多个类

若removeClass()中没有参数，则移除所有类。
3）判断类 hasClass()

$("dom对象").hasClass("类名");//判断这个对象有没有这个类，有返回true，反之返回false

4）切换类 toggleClass()

$("dom对象").toggleClass("类名");

如果元素有这个类则删除这个类，没有则添加这个类

4、设置获取样式css()

1）获取样式

$("dom对象").css("属性");

获取多个dom对象的属性，只会显示第一个
2）设置样式

$("dom对象").css("属性","值");  //设置单样式
$("dom对象").css({
	'width': '值',
	'height': '值'
});   //设置多样式

设置多个dom对象的样式时，会全部设置成功。

5、尺寸

在这里插入图片描述

1）width() 设置或获取元素的宽度（不包括内边距、边框或外边距）

$("dom对象").width();//获取宽度
$("dom对象").width(值);//设置宽度

2）height() 设置或获取元素的高度（不包括内边距、边框或外边距）

$("dom对象").height();//获取宽度
$("dom对象").height(值);//设置宽度

3）innerWidth() 获取元素的宽度（包括内边距）

$("#div1").innerWidth();

4）innerHeight() 获取元素的高度（包括内边距）

$("#div1").innerHeight();

6）outerWidth() 获取元素的宽度（包括内边距和边框）

$("#div1").outerWidth();

7）outerHeight() 获取元素的高度（包括内边距和边框）

$("#div1").outerHeight();

六、jquery 遍历

1、祖先

1）parent() 获取被选元素的直接父元素

$("dom对象").parents();

2）parents() 获取被选元素的所有祖先元素，它一路向上直到文档的根元素 ()

$("dom对象").parents();//可以有参数，返回所有拥有该参数名的祖先元素

3）parentsUntil() 获取介于两个给定dom对象之间的所有祖先元素

$("dom对象").parents("dom对象);

2、后代

1）children() 获取被选元素的所有直接子元素

$("div").children();//如果设置了参数返回拥有该参数名的所有直接子元素

2）find() 获取被选元素的后代元素，一路向下直到最后一个后代

$("div").find();//如果设置了参数返回拥有该参数名的所有子元素

3、同胞

1）siblings() 返回被选元素的所有同胞元素

$("dom对象").siblings();

2）next() 返回被选元素的下一个同胞元素

$("dom对象").next();

3）nextAll() 返回被选元素的所有跟随的同胞元素

$("dom对象").nextAll();

4）nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素

$("dom对象").nextUntil("dom对象");

5）prev() 返回被选元素的上一个同胞元素

$("dom对象").prev();

6）prevAll() 返回被选元素的前面所有同胞元素

$("dom对象").prevAll();

7）prevUntil() 返回介于两个给定参数之间的前面所有的同胞元素

$("dom对象").prevUntil("dom对象");

siblings()，next()，nextAll()，prev()，prevAll();都可以增加选择器参数，代表返回参数名一致的值。

4、过滤

1）first() 返回被选元素的首个元素

$("dom对象").first();//寻找第一个该dom对象

2）last() 返回被选元素的最后一个元素

$("dom对象").last();//寻找最后一个该dom对象

3）eq() 返回被选元素中带有指定索引号的元素

$("dom对象").eq(index);//选取第index个该dom对象

4）filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

$("dom对象").filter("选择器");//返回带有该选择器的dom对象

5）not() 返回不匹配标准的所有元素

$("dom对象").not("选择器");//返回不带有该选择器的dom对象

七、jquery 注册、解绑和触发事件

1、on简单注册事件

简单注册不能动态注册

$("div").on("click",function(){});

2、on委托注册事件

委托其父亲元素注册事件，支持动态注册

$("父亲元素").on("click","该元素",function(){});

3、off解绑事件

解绑事件，可选参数不填时解绑所有事件

$("dom元素").off("事件名");

4、trigger触发事件

一般用来触发一些自己注册的自定义事件

$("dom元素").trigger("事件名");

八、jquery AJAX

1、AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

2、load() 从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。回调函数可以设置不同的参数：

responseTxt 包含调用成功时的结果内容
statusTXT 包含调用的状态 success为成功，error为失败
xhr 包含 XMLHttpRequest 对象

3、$.get() 通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

4、$.post() 通过 HTTP POST 请求向服务器提交数据

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

九、jquery 插件

1、jQuery Validate

jQuery Validate 插件为表单提供了验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

2、jQuery Cookie

jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。

3、jQuery Accordion

jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

4、jQuery Autocomplete

jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。

5、jQuery Growl

jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。

6、jQuery 密码验证

jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。

7、jQuery Prettydate

jQuery Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

8、jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。

9、jQuery Treeview

jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。

十、案例

1、点击菜单显示对应下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("div").hide();//将所有下拉菜单隐藏
				$("li").click(function(){
					$(this).children("div").show().parent().siblings("li").children("div").hide();//显示对应下拉菜单，隐藏其他下拉菜单
				});
			})
		</script>
	</head>
	<body>
		<ul class="nume">
			<li>
				<p>下拉菜单1</p>
				<div>隐藏1</div>
			</li>
			<li>
				<p>下拉菜单2</p>
				<div>隐藏2</div>
			</li><li>
				<p>下拉菜单3</p>
				<div>隐藏3</div>
			</li>
		</ul>
	</body>
</html>

2、鼠标移到一个li上，在另一块区域显示对应的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".nume1>li").hide();//隐藏所有
				$(".nume1>li:eq(0)").show();//显示第一个
				$(".nume>li").mouseenter(function(){
					var idx = $(this).index();//获取现在鼠标所在的li的下表
					//console.log(idx)
					$(".nume1>li:eq("+idx+")").show().siblings("li").hide();//将对应隐藏内容显示,隐藏其他
				});
			})
		</script>
	</head>
	<body>
		<ul class="nume">
			<li>
				<p>下拉菜单1</p>
			</li>
			<li>
				<p>下拉菜单2</p>
			</li><li>
				<p>下拉菜单3</p>
			</li>
		</ul>
		<ul class="nume1">
			<li>
				<p>隐藏1</p>
			</li>
			<li>
				<p>隐藏2</p>
			</li>
			<li>
				<p>隐藏3</p>
			</li>
		</ul>
	</body>
</html>

3、导航栏鼠标悬停添加active类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".nume>li").mouseenter(function(){
					$(this).addClass("active").siblings("li").removeClass("active");//对应li添加类其他删除
				});
			})
		</script>
		<style type="text/css">
			.active{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<ul class="nume">
			<li>
				<p>菜单1</p>
			</li>
			<li>
				<p>菜单2</p>
			</li>
			<li>
				<p>菜单3</p>
			</li>
		</ul>
	</body>
</html>

4、点击按钮生成列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var data = [  //表格内容
					{
						name: 'li',
						age: 14,
						cla: 1
					},{
						name: 'lin',
						age: 15,
						cla: 1
					},{
						name: 'lij',
						age: 16,
						cla: 1
					},
				];
				$("#btn").click(function(){
					//console.log('1')
					var da = [];//存放要添加的数据
					for(var i=0;i<data.length;i++){
						//生成tr.td.数据
						da.push("<tr>");
						for (var key in data[i]) {
							da.push("<td>");
							da.push(data[i][key]);
							da.push("</td>");
						}
						da.push("</tr>");
					}
					console.log(da);
					var dat = da.join("")
					console.log(dat);
					$(".abc").html(dat);
				})
			})
		</script>
	</head>
	<body>
		<button type="button" id="btn">生成</button>
		<table border="" cellspacing="" cellpadding="">
			<tbody class="abc">
				
			</tbody>
		</table>
		
	</body>
</html>

5、城市选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//全部右移
				$(".a").click(function(){
					$("#left>select>option").appendTo("#right>select")
				})
				//全部左移
				$(".b").click(function(){
					$("#right>select>option").appendTo("#left>select")
				})
				//选中右移
				$(".c").click(function(){
					$("#left>select>option:selected").appendTo("#right>select")
				})
				//选中左移
				$(".d").click(function(){
					$("#right>select>option:selected").appendTo("#left>select")
				})
			})
		</script>
	</head>
	<body>
		<div id="left">
			<select multiple>
				<option>福州</option>
				<option>厦门</option>
				<option>莆田</option>
				<option>泉州</option>
			</select>
		</div>
		<div>
			<button class="a">>></button>
			<button class="b"><<</button>
			<button class="c">></button>
			<button class="d"><</button>
		</div>
		<div id="right">
			<select multiple></select>
		</div>
	</body>
</html>

6、添加、删除和清空表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//点击添加信息
				$("#add").click(function(){
					$("#addBox").show();
				})
				//点击关闭
				$(".x").click(function(){
					$("#addBox").hide();
				})
				//点击添加
				$(".add").click(function(){
					var text = "";
					text = "<tr><td>"+$('.zimu').val()+"</td><td>"+$('.shuzi').val()+"</td><td class='remove'>remove</td></tr>";//拼接内容
					//console.log(text);
					$("#table>tbody").append(text);//添加节点
				})
				//清空所有
				$("#empty").click(function(){
					$("#table").empty();
				})
				//删除对应行
				$(".remove").click(function(){
					$(this).parent().remove();
				})
			})
		</script>
	</head>
	<body>
		<button type="button" id="empty">清空</button>
		<button type="button" id="add">添加</button>
		<div id="addBox" style="display: none;">
			<div>
				字母：<input type="text" class="zimu">
				数字：<input type="text" class="shuzi">
				<button class="add">添加</button>
				<button type="button" class="x">关闭</button>
			</div>
		</div>
		<table border="" cellspacing="" cellpadding="" id="table">
			<tbody>
				<tr>
					<td>a</td>
					<td>1</td>
					<td class="remove">remove</td>
				</tr>
				<tr>
					<td>b</td>
					<td>2</td>
					<td class="remove">remove</td>
				</tr>
				<tr>
					<td>c</td>
					<td>3</td>
					<td class="remove">remove</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

7、固定导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//获取第一部分高度
				var Top = $("#one").height();
				//执行滚动事件
				$(window).scroll(function(){
					//判断滚动长度
					var scrollLength = $(window).scrollTop();
					if(scrollLength>Top){
						//超过第一部分高度,固定定位
						$("#two").css({
							position: "fixed",
							top: 0
						})
						//设置固定定位后本身高度不计入文本流,要给下一部分增加高度
						$("#thr").css("marginTop",$("#two").height()+10)
					}else{
						//没超过
						$("#two").css({
							position: "static",
							top: 0,
							left: 0
						})
						$("#thr").css("marginTop",10)
					}
				})
			})
		</script>
	</head>
	<body>
		<div style="height: 150px;background-color: red;" id="one"></div>
		<div style="height: 100px;background-color: green;"  id="two">abcd</div>
		<div style="height: 2000px;background-color: blue;margin-top: 10px;"  id="thr"></div>
	</body>
</html>

注：本篇博客为jquery的学习博客，学习内容为：
jquery教程|菜鸟教程: https://www.runoob.com/jquery/jquery-tutorial.html.
bilibili jquery教程: https://www.bilibili.com/video/BV1pt411H7D6.

BeiLingI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始玩转jquery

从零开始玩转jquery一、jquery的基本概念1、jquery是什么jQuery是一个JavaScript函数库，它是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities2、如何安装jquery1）从 jquery.com 下载 jQuery 库引用方式：<head>&lt
复制链接

扫一扫