jQuery 语法

目录：

一、jQuery 语法

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

二、文档就绪函数

  $(function(){    

        //主题内容部分

 })

内容：

一、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

• 美元符号定义 jQuery

• 选择符（selector）"查询"和"查找" HTML 元素

• jQuery 的 action() 执行对元素的操作

如：

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

$("p").hide() - 隐藏所有标签为p的段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

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

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

jQuery 使用 $ 符号作为 jQuery 的简介方式。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<p>it问答网</p>
<script>
    //jQuery("p").hide();
    $("p").hide();
</script>

如上可以看到"it问答网"看不见的。但是若把js放到操作html前面，则js功能无效，如下：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
    //jQuery("p").hide();
    $("p").hide();
</script>
<p>it问答网</p>

原因：先执行的jQuery("p").hide(); 这个时候p标签还没出现呢。解决方法：

1、把操作节点的动作js放到对应html节点的后面；

2、让文档节点加载完后再执行。$(function(){你的动作语句})【类似js传统写法的window.onload=function(){你的动作语句}】

二、文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){   
       //主题内容部分
       document.write("www.itwenda.com");
    });
</script>

可以简写为：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(function(){   
       //主题内容部分
       document.write("www.itwenda.com");
    });
</script>

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

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

•     试图操作一个不存在的元素【如：设置隐藏】

•     获得未完全加载的图像的属性【如：得到大小】