WEB从零学期记录--jquery0-入门

最新推荐文章于 2024-05-05 23:49:29 发布

LvGuyKING

最新推荐文章于 2024-05-05 23:49:29 发布

阅读量405

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/we08guyy/article/details/54694802

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.安装jQuery、node.js.

（如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。）

菜鸟教程 CDN:

 
  < 
  head 
  > 
  < 
  script 
  src 
  = 
  " 
  http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js 
  " 
  > 
  </ 
  script 
  > 
  </ 
  head 
  >
  
 

百度 CDN:

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

新浪 CDN:

 
  < 
  head 
  > 
  < 
  script 
  src 
  = 
  " 
  http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js 
  " 
  > 
  </ 
  script 
  > 
  </ 
  head 
  > 
 

Google CDN:

 
  < 
  head 
  > 
  < 
  script 
  src 
  = 
  " 
  http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js 
  " 
  > 
  </ 
  script 
  > 
  </ 
  head 
  > 
 

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

2.结合RUNOOB和w3school.入门jquery，从而更简单地入门js

jQuery 语法

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

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

选择器允许您对元素组或单个元素进行操作

Query 元素选择器

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

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

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

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

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

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

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

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

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
</script>

jQuery 事件函数

jQuery 是为事件处理特别设计的。

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

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

通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码

会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

Query 事件

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

如需完整的参考手册，请访问我们的 jQuery 事件参考手册。

3.用jQuery完成更加完整的任务

贴出我的测试代码，完成隐藏、显示命令，以供日后查看。

<html>
	<head>
	  <script type="text/javascript" src="jquery-3.1.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("button.bt").click(function(){
					$("p").css("background-color","red");
					$("#hidething").hide();
			  });
		});
		</script>
		<script type="text/javascript">
		$(document).ready(function(){
		 $("button.togglebt").click(function(){
				$(".ex").toggle(1000);
		  });
		 });
		</script>
		<script type="text/javascript">
		$(document).ready(function(){
			$(".ex").hide();
			});
		</script>
		<style type="text/css">
			div.ex{
				background-color:#e5eecc;
				padding:7px;
				border:solid 1px #c3c3c3;
				}
		</style>
	</head>
	
	
	<body>
		<h2>This is a head</h2>
		<p>this is s paragraph</p>
		<p id="hidething">If you click,I will disappear.</p>
		<button type="button" class="bt">Click me</button>
		<h2>my favorite tv series<h2>
		
		<div class="ex">
			<p>bojack horseman</p>
			<p>you know it??</p>
		</div>
		<button type="button" class="togglebt">hide or show</button>
	</body>
</html>

啊哈！去看SQL和PHP啦。