jQuery语法

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

示例1

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery 选择器

• jQuery 元素选择器

  • jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。

    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

• jQuery 属性选择器

　　　　　   jQuery 使用 XPath 表达式来选择带有给定属性的元素。

　　　　　　$("[href]") 选取所有带有 href 属性的元素。

　　　　　　$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

　　　　　　$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

　　　　　　$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

• 利用变量选择多种情况

　　　　　　$("#"+area_id); 其中area_id为一变量，通过传入函数的参数area_id值的不同，可以选择不同的元素。

　　　　　　使用变量时一定要用上+字符串连接号。

• 通过文本选择元素

　　　　　　var element=$("a:contains('添加')");

　　　　　　选择标签a中所有显示值中包含文本“添加”的元素。

　　　　　　选出所有

jQuery 选择器的属性

以此标签做为例子

<td><a href="###" id="6" onclick="add_ip(6);return false;">添加</a></td>
<script>
　　 var element = $("#6");
</script>

• 长度属性   $(selector).length

if (($("a:contains('添加')").length - $("a:contains('已添加')").length) == 2) {
            var element = $("a:contains('添加')");
        } else {
            var element = $("#"+area_id);  
        }

当需要添加的元素只有一个时，选择所有包含“添加”文本的元素。

• 删除元素的属性

element.removeAttr("onclick");
element.removeAttr("href");

• 改变元素的样式

element.css("text-decoration","none"); //去掉文字的下画线
element.css("color","grey"); //改变字体颜色

• 获取元素的样式的值进行判断

if ($(this).css("display") == "table-row" ) ｛
        $(this).css("display","none")
｝

• 改变元素的显示值

element.text("已添加");

• 替换元素的标签

element.replaceWith("<label style="color:grey;">已添加</label>");
//更改之后元素变为<label>标签
<label style="color:grey;">已添加</label> 

• 定位元素的父节点和兄弟节点

var element_prev = element.parent().prev(); //这里<a>的父节点是<td>标签，而<td>标签的前一个节点是前一个<td>标签

 程序猿必读