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 选择器的属性

以此标签做为例子

添加 

 

• 长度属性   $(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("已添加");//更改之后元素变为标签已添加 

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

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