admin 发表于 2018-11-15 13:46:39

jQuery教程之jQuery语法

jquery语法是为html元素的选取制定的,可以对元素执行某些相关操作。
基础语法是:$(selector).action();
我们使用$美元符定义jquery语句,selector选择符查询和查找html元素,jquery的action()执行对元素的操作。
示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。


在最开始的代码例子中我们还看到了:
$(document).ready(fuction(){
--- jQuery functions go here ----
});这个代码是为了防止jquery代码在文档没有完全加载完就执行。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
1、试图隐藏一个不存在的元素
2、获得未完全加载的图像的大小


在html DOM术语中:
选择器允许您对DOM元素组或单个元素DOM节点进行操作。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("") 选取所有带有 href 属性的元素。
$("") 选取所有带有 href 值等于 "#" 的元素。
$("") 选取所有带有 href 值不等于 "#" 的元素。
$("") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
实例代码如下:
<html>
<head>
<script type="text/javascript" src="/jquery/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>代码运行前:

代码运行后:

更多的选择器实例:

jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

例如:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行!");
});
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>
页: [1]
查看完整版本: jQuery教程之jQuery语法