今天是第二次接触jq,利用他的几个函数功能(效果,html等)完善了轮播图,才意识到,能够熟练运用jq是一件让人很兴奋的事,真是应了那句话,东西用到最后,就是一个偷懒的过程,希望我们共同进步,今天来系统的学习jq。
学习基础知识,W3C已经足够了,师傅领进门,这个师傅已经足够细心,我们只需要付出汗水就好。
jQuery 简介
jQuery 库可以通过一行简单的标记被添加到网页中。
是一个 JavaScript 函数库。
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
<script type="text/javascript" src="jquery.js"></script>
请注意,
下载 jQuery
共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。
这两个版本都可从 jQuery.com 下载。
库的替代
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
$(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide()
- 隐藏当前元素
$("p").hide()
- 隐藏所有段落
$(".test").hide() -
隐藏所有 class=”test” 的所有元素
$("#test").hide()
- 隐藏所有 id=”test” 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
— jQuery functions go here —-
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
jQuery 选择器-选择器允许您对元素组或单个元素进行操作。
在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器
是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML
元素组或单个元素进行操作。
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p")
选取 <p>
元素。
$("p.intro")
选取所有 class="intro"
的 <p>
元素。
$("p#demo")
选取所有 id="demo"
的 <p>
元素。
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]")
选取所有带有 href
属性的元素。
$("[href='#']")
选取所有带有 href
值等于 "#"
的元素。
$("[href!='#']")
选取所有带有 href 值不等于 "#"
的元素。
$("[href$='.jpg']")
选取所有 href
值以 ".jpg"
结尾的元素。
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
请看~
jQuery 事件
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>
部分的事件处理方法中:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
该方法隐藏所有 <p>
元素:
$("p").hide();
jQuery
使用 $
符号作为 jQuery
的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery
使用名为 noConflict()
的方法来解决该问题。
var jq=jQuery.noConflict(),
帮助您使用自己的名称(比如 jq)来代替 $ 符号。