JQuery语法

最新推荐文章于 2024-07-27 16:41:27 发布

innocence_123

最新推荐文章于 2024-07-27 16:41:27 发布

阅读量359

点赞数

分类专栏：前段weeb 文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/innocence_123/article/details/124710713

版权

前段weeb 专栏收录该内容

3 篇文章

订阅专栏

一、基础语法结构

jQuery的基础语法结构如下：

$(selector).action()

其中美元符号$表示jQuery语句，选择符selector用于查询HTML元素，action()需要替换为对元素某种具体操作的方法名。

例如：

$("p").hide();

在HTML中<p>表示段落标签，hide()为jQuery中的新方法用于隐藏元素。因此上述代码表示隐藏所有段落。

二、文档就绪函数

为了避免文档在加载完成前就运行了jQuery代码导致潜在的错误，所有的jQuery函数都需要写在一个文档就绪（document ready）函数中。例如当前HTML页面还没有加载完，因此某HTML元素标签可能还无法查询获取。

文档就绪函数的写法如下：

//第一种方式
$(document).read(function(){
	alert("文档加载完毕!");
})
 
//第二种方式
$().read(function(){
		alert("文档加载完毕!");
})
 
//第三种方式
$(function(){
		alert("文档加载完毕!");
})

jQuery文档就绪函数的使用

<body>
        <h3>jQuery文档准备就绪函数的应用</h3>
        <hr>
        <script>
            $(document).ready(function() {
                alert("jQuery文档准备就绪！");
            });
        </script>
</body>

效果如下

JQuery名称冲突

jQuery 通常使用美元符号 $ 作为简写方式，但在同时使用了多个 JavaScript 函数库的 HTML 文档中 jQuery 就有可能与其他同样使用 $ 符号的函数（例如 Prototype ）冲突。 因此 jQuery 使用 noConflict () 方法自定义其他名称来替换可能产生冲突的 $ 符号表达方式。

jQuery自定义名称代替$符号

<head>
        <meta charset="utf-8">
        <title>jQuery自定义名称代替$符号</title>
        <script src="js/jquery-1.12.3.min.js"></script>
</head>
 <body>
        <h3>jQuery自定义名称代替$符号</h3>
        <hr>
        <button>
            测试jQuery别名
        </button>
        <script>
            var jq = jQuery.noConflict();
            jq(document).ready(function() {
                jq("button").click(function() {
                    alert("jQuery的别名生效了！");
                });
            });
        </script>
    </body>

代码效果如下：