jQuery非常经典实战教程
第1章　基础之篇
第1讲　jQuery简介
【1】适合JQuery课程学习的人员：①准备做Ajax前台开发；②熟悉Java、.Net、PHP、Python、Ruby等；③熟悉JavaScript，了解Ajax，想要提高；④网页设计师，熟悉CSS；⑤想熟练掌握JQuery的使用方式。
【2】JQuery的特点：
①写尽可能少的代码，做尽可能多的事情（Write less,Do more）；
②用很简洁的代码完成很丰富的工作，会改变我们写JavaScript代码的一些方式；
③支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本；
④以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查DOM对象，然后对其进行各种操作；
⑤屏蔽浏览器差异，对DOM的操作提供了方便
的扩展，易用的事件处理API和动画API；
⑥强大的插件机制；
⑦社区活跃，文档非常齐全，全部配有示例。学
习容易，易用性很高。
【3】学习环境准备：
①任何你喜欢的编辑器或IDE；
②各种主流浏览器；
③一个自己熟悉的应用服务器。
【4】jQuery是一个轻量级的 JavaScript库 ，它极大地简化了JavaScript编程。
【5】【点击后隐藏的效果】
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("p").click(function () {
            $(this).hide();
        });
    });
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
【6】jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数，可以通过下面的标记把jQuery添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"> </script>
</head>
第2讲　jQuery语法
【1】jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
·美元符号定义jQuery
·选择符selector“查询”和“查”HTML元素
·jQuery 的action()执行对元素的操作
【2】【$(this).hide()：隐藏当前Html元素】
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $(this).hide();
        });
    });
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>
【3】【$("#test").hide()：隐藏所有 id="test" 的元素】
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("#test").hide();
        });
    });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
【4】【$("p").hide()：隐藏所有段落】
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("p").hide();
        });
    });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
【5】【$(".test").hide()或$("p.test").hide()：隐藏所有 class="test" 的段落】
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></scriptajax实例 文件浏览>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $(".test").hide();
        });
    });
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
【6】文档就绪函数：我们让所有的jQuery函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
第3讲　jQuery选择器
【1】 JQuery选择器 ：可以用来准确地选取您希望应用效果的元素。jQuery 元素选择器 和 属性选择器 允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTML DOM术语中，选择器允许您对DOM元素组或单个DOM节点进行操作。
【2】jQuery元素选择器：jQuery使用CSS选择器来选取HTML元素。
①$("p") 选取<p>元素；
②$("p.intro") 选取所有class="intro"的<p>元素；
③$("p#demo") 选取id="demo" 的第一个<p>元素。
【3】jQuery属性选择器：jQuery使用XPath表达式来选择带有给定属性的元素。
① $("[href]") 选取所有带有href属性的元素；
② $("[href='#']") 选取所有带有href值等于"#"的元素；
③ $("[href!='#']") 选取所有带有href值不等于"#"的元素；
④ $("[href$='.jpg']") 选取所有href值以".jpg"结尾的元素。
【4】jQuery CSS 选择器：jQuery CSS选择器可用于改变HTML元素的CSS属性。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $("p").css("background-color", "red");
        });
    });
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
【5】【更多选择器实例】
语法
描述
$(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"的元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。