JQuery总结

来源：互联网发布：手机注册淘宝买家流程编辑：程序博客网时间：2024/06/05 03:27

JQuery总结

1、JQuery:是对JavaScript的封装，是一个轻量级的“写得少，做得多”的JavaScript 函数库，JQuery内容为JScript文件，所以可以通过<script>标签进行引入；

2、JQuery库包含的功能:

a) HTML元素选取

b) HTML元素操作

c) CSS操作

d) HTML事件函数

e) JavaScript特效和动画

f) HTML DOM遍历和修改

g) Ajax网络异步请求

h) Utilities

i) 其他插件

3、JQuery下载和引入方式

JQuery下载

Production version - 用于实际的网站中，已被精简和压缩；

Development version - 用于测试和开发(未压缩，为可读的代码)；

JQuery引入方式

文件离线引入

在线引入

4、JQuery语法结构

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

JQuery通过选择器选取HTML元素，然后对其执行预期的操作；

格式详述:

1、美元符号定义 jQuery

2、选择符（selector）"查询"和"查找" HTML 元素

3、jQuery 的 action() 执行对元素的操作

5、文档就绪事件

文档就绪事件功能为防止文档未全部加载完成前执行JQuery代码；

6、JavaScript、JQuery 三种文档加载形式

<!--js代码在Html页面引入方式--><html><head><meta charset="utf-8"/><title>js学习</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"><!--形式一-->window.onload=function(){var top = document.getElementById("top");top.innerHTML = "jquery学习";}<!--形式二-->$(document).ready(function(){var top = document.getElementById("top");top.innerHTML = "jquery文档加载方法一";});<!--形式三-->$(function(){var top = document.getElementById("top");top.innerHTML = "jquery文档加载方法二";});</script></head><body><div id="top" >hello</div></body></html>

7、JQuery选择器

a) 元素选择器

<html><head><meta charset = "utf - 8"><title>JQuery测试</title><script src = "jquery-3.1.1.min.js"></script><script type = "text/javascript">$(function(){$("h1").html("欢迎使用JQuery");})</script></head><body><h1 id = "h1">JQuery测试</h1></body></html>

b) ID选择器

<html><head><meta charset = "utf - 8"><title>JQuery测试</title><script src = "jquery-3.1.1.min.js"></script><script type = "text/javascript">$(function(){$("#h1").html("你好中国，我的祖国");$("#h1").css("color","red");})</script></head><body><h1 id = "h1">JQuery测试</h1></body></html>

c) 类选择器

<html><head><meta charset = "utf - 8"><title>JQuery测试</title><script src = "jquery-3.1.1.min.js"></script><script type = "text/javascript">$(function(){$("#h1").html("你好中国，我的祖国");$("#h1").css("color","red");$(".prograph").css("color","blue");})</script></head><body><h1 id = "h1">JQuery测试</h1><p class = "prograph">世上无难事，只怕有心人</p></body></html>

d) 群组选择器

<html><head><meta charset = "utf - 8"><title>JQuery测试</title><script src = "jquery-3.1.1.min.js"></script><script type = "text/javascript">$(function(){$("#h1").html("你好中国，我的祖国");$("#h1,.prograph").css("color","red");$("#in").val("盼盼");})</script></head><body><h1 id = "h1">JQuery测试</h1><p class = "prograph">世上无难事，只怕有心人</p>用户名:<input type = "text" id = "in" value = "佳佳"/>用户密码:<input type = "password" id = "pass" value = "123"/> </body></html>

e) *选择器(选择某一级下所有的元素)

<html><head><meta charset = "utf - 8"><title>JQuery测试</title><script src = "jquery-3.1.1.min.js"></script><script type = "text/javascript">$(function(){$("#h1").html("你好中国，我的祖国");$("#h1,.prograph").css("color","red");$("#in").val("盼盼");$("#elem *").css("color","green");})</script></head><body><div id = "elem"><h1 id = "h1">JQuery测试</h1><h2 >生活永远都是快乐的</h2><p class = "prograph">世上无难事，只怕有心人</p>用户名:<input type = "text" id = "in" value = "佳佳"/>用户密码:<input type = "password" id = "pass" value = "123"/> </div></body></html>

f) 属性选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title><meta charset="utf-8"/>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>    <script type="text/javascript">       $(function () {           $("p[class=p_c1]").css("color","red");    $("input[type='text']").val("李桃");           })   </script></head><body>    <h3>前端核心技术</h3><p class="p_c">class属性1</p><p class="p_c1">class属性2</p>用户名:<input type="text" value="张三"/>密码:<input type="password" value="123"/>  </body></html>

g) 层级选择器

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title><meta charset="utf-8"/>    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>    <script type="text/javascript">       /*jQuery层次选择器选择器       说明$("M N")      后代选择器，选择M元素内部后代N元素（所有N元素）$("M>N")     子代选择器，选择M元素内部子代N元素（所有第1级N元素，若N为*表示M元素内部所有元素）$("M~N")     兄弟选择器，选择M元素后所有的同级N元素$("M＋N")    相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素,若下一个元素相同也会被选中）   */       $(function () {            $("#d1 p").css("color","red");  //后代选择器 $("#d1>p").css("color","red");  //子元素选择器 $("#d1~p").css("color","red");   //兄弟选择器$("#d1+p").css("color","red");    //相邻选择器       })   </script></head><body>    <h3>前端核心技术</h3>    <div id="list">       <div id="d1">            一级元素div<p>二级元素p</p>       </div>       <p>一级元素p1</p>           <span>一级元素span</span><p>一级元素p2</p>   </div></body></html>

8、JQuery动作

a) html改变元素内容

b) Css改变元素样式

c) attr改变元素属性值

<html><head><meta charset="utf-8"/><title>员工表</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){var h = $("h3").html();var t = $("p").text();var i = $("input").val();//alert(h + " " +t +" "+i);$("a").attr("href","http://www.baidu.com"); //改变元素属性值})</script></head><body> <h3>HTML内容</h3><p>纯文本内容</p>用户名:<input type="text" value="张三"/><br><br><a href="#" >跳转页面</a></body></html>

0 0