jQuery 语法

2021-04-28 13:24:25 更新


目录:

一、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 代码。

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

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

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