Introduction to jQuery
- jQuery 是一个快速、简洁的 Javascript 框架，是目前最流行的 Javascript 程序库，它是对 Javascript 对象和函数的封装
- jQuery 的设计思想是 Write less, do more
- 实现隔行变色效果，Javascript 要循环加判断，而 jQuery 只需一句关键代码
$("tr:even").css("background-color", "#ccc");jQuery Function
- 访问和操作 DOM 元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的 jQuery 插件
- 与 Ajax 技术完美结合
jQuery Usage
工厂函数 $()：将 DOM 对象转化为 jQuery 对象
方法 action()：jQuery 中提供的方法，其中包括绑定事件处理的方法 “$” 等同于 “jQuery”
DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用
$("#title").html();// 等同于document.getElementById("title").innerHTML;基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
<p>中国</p><p>China</p><p class="jy">加油</p><p id="wan">万</p><h3 class="jy">加油</h3><script src=https://news.ytian678.com/skin/default/image/nopic.gif // 标签选择器，获得所有的 p $("p").css("color","red"); // 类选择器 $(".jy").css("color","red"); // ID 选择器，更具备唯一性 $("#wan").css("color","red"); // 并集选择器 ".jy" 和 "#wan" $(".jy,#wan").css("color","red"); // 交集选择器，既是 h3 标签，又拥有 ".jy" 的元素 $("h3.jy").css("color","red");</script>层次选择器
<h3>000</h3><div id="x"> 111 <p>p1</p> <div> <p>p2</p> </div></div><h3>222</h3><h3>333</h3><script src=https://news.ytian678.com/skin/default/image/nopic.gif // 后代选择器，忽略层级，选取所有后代元素 $("#x p").css("color","red"); // 子代选择器，只选取子层的元素 $("#x>p").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟元素 h3 $("#x+h3").css("color","red"); // 同辈元素选择器，#x 元素之后的的所有兄弟元素 h3 $("#x~h3").css("color","red");</script>属性选择器
<a href="www.baidu.com">百度</a><a href="www.sina.com.cn">新浪网</a><a href="http://www.163.com">网易</a><p href="x">测试1</p><p href="x" title="x">测试2</p><script src=https://news.ytian678.com/skin/default/image/nopic.gif // 选取拥有 href 属性的元素 $("[href]").css("color","red"); // 选取拥有 href=x 的元素 $("[href='x']").css("color","red"); // 选取 a 标签中 href 不等于 x 的元素 $("a[href!='x']").css("color","red"); // 选取 href 属性以 www 开头的元素 $("[href^='www']").css("color","red"); // 选取 href 属性以 com 结尾的元素 $("[href$='com']").css("color","red"); // 选取 href 属性包含 a 的元素 $("[href*='a']").css("color","red"); // 选取拥有 href 属性和 title 属性，并且 title=x 的 p 元素 $("p[href][title='x']").css("color","red");</script>过滤选择器
<h2 id="h2#x">选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src=https://news.ytian678.com/skin/default/image/nopic.gif // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red"); // 偶数行的 li $("li:even").css("color","red"); // 奇数行的 li $("li:odd").css("color","red"); // 下标为 2 的 li $("li:eq(2)").css("color","red"); // 下标大于 1 的 li $("li:gt(1)").css("color","red"); // 下标小于 2 的 li $("li:lt(2)").css("color","red"); // 使用转义符 $("#h2\\#x").css("color","red");</script>事件
鼠标事件
用户每次按下或者释放键盘上的键时都会产生事件。
<input><h3></h3><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("input").keyup( function(){ // 获取框中的值 var str = $(this).val(); // 将 h3 元素中的文本内容更改为 str $("h3").text( str ); } );</script>表单事件
hover() 方法相当于 mouseover 与 mouseout 事件的组合。
<img src=https://news.ytian678.com/skin/default/image/nopic.gif width="400"><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("img").hover( function(){ $(this).css("border","5px solid red"); }, function(){ $(this).css("border","5px solid white"); } );</script>连续点击复合事件
<h2>选择</h2><ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li></ul><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("h2").click(function(){ // 连续点击，ul 的可见和隐藏进行切换 $("ul").toggle(); });</script>事件的动态绑定
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<style> div{ width: 200px; height: 200px; background-color: black; }</style><body> <button id="btn1">显示</button> <button id="btn2">隐藏</button> <button id="btn3">切换</button> <div></div> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script> $("#btn1").click(function(){ $("div").show('slow'); }); $("#btn2").click(function(){ // fast:快速的 // slow:缓慢的 // 毫秒：自定义 $("div").hide(2000); }); $("#btn3").click(function(){ $("div").toggle(1000); }); </script></body>改变元素的高（拉伸效果）
- slideDown(speed)：显示
- slideUp(speed)：隐藏
- slideToggle(speed) 等价于 slideDown + slideUp
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<script> $("#btn1").click(function(){ // 显示：映入眼帘 $("div").fadeIn(1000); }); $("#btn2").click(function(){ // 隐藏：淡出我的视线 $("div").fadeOut(1000); }); $("#btn3").click(function(){ // 切换 $("div").fadeToggle(1000); }); $("#btn4").click(function(){ // 1 秒内变成 50% 的透明度 $("div").fadeTo(1000,0.5); });</script>链
例如：点击一次按钮，让 div 完成 4 个指定动作：
- 背景变粉
- 字体变绿
- 向上收缩
- 向下拉伸
<style> div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } </style><body> <button>试试</button> <div>hello</div> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script> $("button").click(function(){ $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000); }); </script></body>DOM 和 CSS 的操作
属性函数
attr("属性", "新值") 修改元素的属性值。
val() 获得表单元素中的 value 值
html() 获得元素中的内容（标签 + 文本）
text() 获得元素中的文本
css("属性") 获得该属性值
css({json}) 设置多个属性的值
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script> $("button").click(function(){ // 获取 css 属性，width 的值 var w = $("div").css("width"); // 一个键值对 $("div").css("background-color","pink"); // 链式编程 $("div").css("background-color","pink").css("border-radius","50%"); // json 为参数 $("div").css({ opacity:"0.4", background:"orange", borderRadius:"50%" }); }); </script></body>width(number) 修改元素的宽度
height(number) 修改元素的高度
<style> div{ width: 150px; height: 150px; background-color: #000; }</style><body> <button>试试</button> <hr> <div></div> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script> $("button").click(function(){ //（无参）获取宽度 var w = $("div").width(); //（无参）获取高度 var h = $("div").height(); alert("宽:"+w+"px，高:"+h+"px"); //（传参）修改宽度 $("div").width("300"); //（传参）修改高度 $("div").height("300"); }); </script></body>类样式函数
removeClass() 将元素的类样式移除
用于向上遍历 DOM 树的方法
- parent() 返回被选元素的直接父元素，仅仅是上一级
- parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
<p><button>测试</button></p><ul> <li>a</li> <li> <b>b</b> </li> <li>c</li></ul><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("button").click(function(){ // 找爸爸 var x = $("b").parent().html(); // 找祖宗 ul var x = $("b").parents("ul").html(); // 找祖宗 body var x = $("b").parents("body").html(); alert( x ); });</script>同辈元素
prev() 获取紧邻匹配元素之前的元素
后代是子、孙、曾孙等等
- children([selector]) 方法返回被选元素的所有直接子元素
<button>测试</button><ul> <li>a</li> <li>b</li> <li>c</li></ul><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("button").click(function(){ // 所有子节点：a b c var x = $("ul").children().text(); // ul 中的第一个子节点 var x = $("ul").children("li:first").text(); alert(x); });</script>- find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代
<button>测试</button><ul> <li>盘古</li> <li>蚩尤</li> <li>刑天 <p>龚工</p> </li> <h3>祝融</h3></ul><script src=https://news.ytian678.com/skin/default/image/nopic.gif $("button").click(function(){ // 在 ul 中查找 p 元素，忽略层级 var x = $("ul").find("p").text(); // 在 ul 中查找 h3 元素，忽略层级 var x = $("ul").find("h3").text(); // 不知道找什么 var x = $("ul").find().text(); alert(x); });</script>元素的过滤
last() 过滤最后一个元素
not() 除了什么之外的元素
案例
手风琴特效
<style> dd { display: none; }</style><body> <nav> <header>网站</header> <ul> <li> <dl> <dt>求职</dt> <dd>1.简历</dd> <dd>2.面试</dd> <dd>3.入职</dd> </dl> </li> <li> <dl> <dt>教育</dt> <dd>1.看视频</dd> <dd>2.做作业</dd> <dd>3.在线辅导</dd> </dl> </li> <li> <dl> <dt>创业</dt> <dd>1.帮助小企业</dd> <dd>2.头脑风暴</dd> <dd>3.赚钱啦</dd> </dl> </li> </ul> </nav> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script> $("nav dt").click(function(){ // 所有的 dd 全部都闭合上，除了自己的兄弟 $("dd").not($(this).siblings()).slideUp(500); // 自己的兄弟进行切换，显示闭合上，闭合的显示出来 $(this).siblings().slideToggle(500); }); </script></body>购物车结算
<style> .minus,.plus{ border:1px solid #999; display: inline-block; width: 20px; height: 20px; text-align: center; text-decoration: none; }</style><body> <table border="1" cellspacing="0" width="400"> <tr> <td>商品编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <tr> <td>1</td> <td>炸香肠</td> <td>3</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>3</td> </tr> <tr> <td>2</td> <td>王八</td> <td>10</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>10</td> </tr> <tr> <td>3</td> <td>恐龙</td> <td>1000</td> <td> <a href="#" class="minus">-</a> <span>1</span> <a href="#" class="plus">+</a> </td> <td>1000</td> </tr> </table> <p style="width: 400px; text-align: right;"> 总价：<b style="color:red;">111</b> <button>提交订单</button> </p> <script src=https://news.ytian678.com/skin/default/image/nopic.gif <script src=https://news.ytian678.com/skin/default/image/nopic.gif>想了解更多，欢迎关注我的微信公众号：Renda_Zhang
