javascript快速入门第三章jquery基础知识

矫情吗；* 2022-08-10 08:37 128阅读 0赞

js博客写完后，就要开始jquery之旅呢，我相信大家一定会爱上它![大笑][laugh.gif]

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)

jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

**jQuery 库包含以下特性：**

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

**向页面添加 jQuery 库 ： **

注意：

\*js要加在样式的后面，为了友好的用户体验，要在加载页面时让用户先看到页面后看效果。

\*使用JQuery就必须要导入JQuery库，一定要导入，一定要导入，一定要导入，重要的事情说三遍。

**jQuery 语法：**

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“作”（actions）

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

基础语法是：$(selector).action()， 用美元符号定义 jQuery

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("\#test").hide() - 隐藏所有 id="test" 的元素

文档就绪函数 , 注： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码

$(document).ready(function()\{

......

\});

或者是

$(function()\{

……

\});

**jQuery 选择器：**

jQuery 使用 CSS 选择器来选取 HTML 元素.

语法:  document.getElementById(id).attribute=值

$("p") 选取 <p> 元素。

$("p .intro") 选取所有 class="intro" 的 <p> 元素。

$("p \#demo") 选取所有 id="demo" 的 <p> 元素。

$("\[href\]") 选取所有带有 href 属性的元素。

$("\[href='\#'\]") 选取所有带有 href 值等于 "\#" 的元素。

$("\[href!='\#'\]") 选取所有带有 href 值不等于 "\#" 的元素。

$("\[href$='.jpg'\]") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

可用于改变 HTML 元素的 CSS 属性

**jQuery 事件：**

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“发”（或“激发”）经常会被使用

**JQuery操作html**

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

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

获取属性 - attr()：

<body>
    	<p>每天进步，每天拿工资</p>
    	<p class = "text">我有一个习惯就是太优秀</p>
    	<div>
    		<p>text和html的区别</p>
    	</div>
    	<div></div>
    	<div></div>
    	<script type = "text/javascript">
    		var _text = $(".text").text();
    		var text_ = $("p").text();
    		$(".text").text("！开玩笑的");
    		//获取索引
    /*		$("p").text(function(i){
    			return "这个p标签的index是 " + i;
    		});
    */
    		var text = $("div").text();
    		var html = $("div").html();
    		$("div").html("<b>Hello Word</b>");
    		$("div").html(function(i){
    			return "这个div标签的index是 " + i;
    		});
    	</script>
    	</body>

**添加元素：**

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

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

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

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

**删除元素：**

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

empty() - 从被选元素中删除子元素

<body>
    	<input type = "text" value = "请输入用户名:"/>
    	<br /><br />
    	<img id = "pic" src = "图片，请亲自行更改" width = "100" height = "100" alt = "图片"/>
    	<br /><br />
    	<p>one</p>
    	<p>two</p>
    	<span id = "text"> ITDragon 博客</span>
    	<div>no.1</div>
    	<div>no.2</div>
    	<script type = "text/javascript">
    		//val 获得匹配元素的当前值
    		var _val = $("input").val();
    		//val 返回匹配元素的值
    		$("input").val("！！！");
    		//attr 返回被选元素的属性值
    		var _attr = $("img").attr("alt");
    		$("#pic").attr({width:"200" ,height:"200"});
    		//append 向每个匹配的元素追加内容
    		$("p").append("<b> _SamllDragon</b>");
    		//prepend 向每个匹配的元素前置内容
    		$("p").prepend("我是前置内容_ ");
    		$("p").prepend($("span"));
    		$("div").prepend($("#text")[0]);
    	</script>
    	</body>

**获取并设置 CSS 类：**

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

<body>
    	<ul>
    		<li>大家好</li>
    		<li>欢迎</li>
    		<li>来到</li>
    		<li>ITDragon</li>
    		<li>博客</li>
    	</ul>
    	<br /><br />
    	<p class = "one">text_1</p>
    	<p class = "two">text_2</p>	
    	<br /><br />
    	<div></div>
    	<script type = "text/javascript">
    		//addClass和removeClass 添加和删除
    /*		$("ul li").hover(function(){
    			$(this).addClass("sel");
    		},function(){
    			$(this).removeClass("sel");
    		});
    */
    		//toggleClass 开关
    		$("ul li").hover(function(){
    			$(this).toggleClass("sel");
    		});
    		//css 取文本第一个的颜色
    		var color = $("p").css("color");
    		//注意两者之间的区分符
    		$(".one").css({"color":"green" , "font-size":"20px"});
    		//注意两个之间是用 逗号“，”
    		$(".two").css("color","blue");
    		//逐渐改变div的大小
    		$("div").click(function() {
    			$(this).css({
    				width: function(index, value) {
    					return parseFloat(value) * 1.8;
    				}, 
    				height: function(index, value) {
    					return parseFloat(value) * 0.8;
    				}
    			});
    		});
    	</script>
    	</body>

JQuery效果：

**隐藏和显示：**

hide() 隐藏

show() 显示

toggle() 该方法可以在 hide() 与 show() 方法之间进行切换

如果元素已显示，则toggle() 会向元素添加隐藏效果。

如果元素已隐藏，则toggle() 会向元素添加显示效果。

**淡入淡出:**

fadeIn() 用于淡入已隐藏的元素

fadeOut() 用于淡出可见元素

fadeToggle()该方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

<body>
    	<p id = "text">head内容省略，是不想占太多内容，亲们用自己双手解决吧</p>
    	<input type = "button" value = "hide" id = "hide"/>
    	<input type = "button" value = "show" id = "show"/>
    	<input type = "button" value = "toggle" id = "toggle"/>
    	<input type = "button" value = "fadeOut" id = "fadeOut">
    	<input type = "button" value = "fadeIn" id = "fadeIn">
    	<input type = "button" value = "fadeToggle" id = "fadeToggle">
    	<script type = "text/javascript">
    	//隐藏
    		$(document).ready(function(){
    			$("#hide").click(function(){
    				$("#text").hide(1000);//slow==600;fast==200
    			});
    		});
    	//显示；并执行反馈操作
    		$(document).ready(function(){
    			$("#show").click(function(){
    				$("#text").show("slow" , function(){
    					$(this).text("欢迎你的到来；哇咔咔");
    				});
    			});
    		});
    	//隐藏和显示轮流进行
    		$(document).ready(function(){
    			$("#toggle").click(function(){
    				$("#text").toggle(1000,function(){
    					$(this).text("欢迎你的到来；哇咔咔");
    				});
    			});
    		});
    	//淡出可见元素
    		$(document).ready(function(){
    			$("#fadeOut").click(function(){
    				$("#text").fadeOut(800);
    			});
    		});
    	//淡入已隐藏的元素
    		$(document).ready(function(){
    			$("#fadeIn").click(function(){
    				$("#text").fadeIn(1000,function(){
    					$(this).text("欢迎你的到来；哇咔咔");
    				});
    			});
    		});
    	//淡进淡出的切换
    		$(document).ready(function(){
    			$("#fadeToggle").click(function(){
    				$("#text").fadeToggle(1000,function(){
    					$(this).text("欢迎你的到来；哇咔咔");
    				});
    			});
    		});
    	</script>
    	</body>

**滑动：**

slideDown()  用于向下滑动元素

slideUp() 方法用于向上滑动元素

slideToggle() 方法

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

<body>
    		<p>哇咔咔</p>
    		<input type = "button" value = "slideDown" id = "slideDown"/>
    		<input type = "button" value = "slideUp" id = "slideUp"/>
    		<input type = "button" value = "slideToggle" id = "slideToggle"/>
    		<script type = "text/javascript">
    			$("#slideDown").click(function(){
    				$("p").slideDown("slow");
    			});
    			$("#slideUp").click(function(){
    				$("p").slideUp("slow");
    			});
    			$("#slideToggle").click(function(){
    				$("p").slideToggle("slow");
    			});			
    		</script>
    	</body>

**动画 - animate() 方法:**

jQuery animate() 方法用于创建自定义动画。在特效集中细讲

**停止动画：**

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

queue:用来停止动画的队列名称

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

$(".top").stop(true,true).fadeOut(600);

一点点进步，一点点成长，我们一起成长。如果有问题或者建议可以留言我，我会及时修改。

更多干货等你来拿  [http://www.itit123.cn/][http_www.itit123.cn]

[laugh.gif]: /images/20220731/d5c6ed879db84af989abf44b14e28db6.png
[http_www.itit123.cn]: http://www.itit123.cn/