html引入jquery_Web前端之jQuery

最新推荐文章于 2024-03-30 17:33:24 发布

刘柏霄

最新推荐文章于 2024-03-30 17:33:24 发布

阅读量6.7k

点赞数

文章标签： html引入jquery

本文链接：https://blog.csdn.net/weixin_42315996/article/details/112079494

版权

1、jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。

var el = document.getElementById("start");
el.innerHTML = "出发吧,骚年!";

$("#start").html("出发吧,骚年!");

jQuery的代码将在所有主流浏览器中运行完全相同，包括Internet Explorer 6！

2、可以从http://www.jquery.com下载jQuery库的副本，或者从CDN（内容分发网络）（如BootCDN或百度CDN）中引入。将使用BootCDN上的CDN。要开始使用jQuery，首先需要使用script标签将其添加到我们的HTML文档的头部。

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
        <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    </head>
    <body>
    </body>
</html>

在使用HTML文档之前等待HTML文档完全加载并准备就绪是一种很好的做法。为此，我们使用 document(文档) 对象的ready事件：

$(document).ready(function() {
    
    // 在这写 jQuery 代码
});

$ 用于访问jQuery。从这里开始，代码访问document对象，并定义了当 document 的 ready 事件触发时要调用的函数。这样可以防止任何jQuery代码在文档加载完成之前运行。我们有一个方便的快捷方式, 等价于上面的代码：

$(function() {
    
   // 在这写 jQuery 代码
});

3、现在，在我们head部分中引入了jQuery库，并且已经定义了文档就绪事件，我们可以开始我们的第一个jQuery操作！让我们改变div元素的内容。

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  </head>
  <body>
    <div id="start">开始</div>
    <script>
    $(function() {
    
      $("#start").html("出发吧,骚年!");
    });
    </script>
  </body>
</html>

以上代码, 在页面文档准备就绪后将 id ="start" 的元素的HTML更改为"出发吧,骚年!"。

4、jQuery用于选择（查找）HTML元素并对其执行"操作"。

$("selector").action()

selector 是选择器, 用于查找HTML元素。action 是要元素要执行的动作。

$("p").hide()  // 隐藏所有<p>元素
$(".demo").hide()  // 隐藏所有 class="demo" 元素
$("#demo").hide()  // 隐藏 id="demo" 的元素

jQuery使用CSS选择器语法来选择元素。

5、选择

jQuery选择器以美元符号和圆括号开头:$()。注意: jQuery中所有的符号都是英文符号。最基本的选择器是元素选择器，它根据元素名称选择所有元素。

$("div")  // 选择所有<div>元素

接下来是id和类选择器，它们通过id和类名来选择元素：

$("#test") // 选择id="test"的元素
$(".menu") //选择class="menu"的所有元素

还可以对选择器使用以下语法：

$("div.menu")  // 所有<div>元素与class="menu"
$("p:first")  // 第一个<p>元素
$("h1, p") // 所有<h1>和所有<p>元素
$("div p") // 所有<div>元素后代的<p>元素
$("*")  // DOM的所有元素

选择器比纯JavaScript更容易访问HTML DOM元素。

6、常用选择器

7、可以通过jQuery轻松的操作分配给HTML元素的属性。比如元素的 href,src,id,class,style 属性。attr()方法用于获取属性的值。

<a href="www.w3cschool.cn">
   点击这里
</a> 
---------
$(function() {
    
  var val = $("a").attr("href");
  alert(val);
});

attr() 方法还允许我们通过第二个参数来给属性设置一个值。

最低0.47元/天解锁文章

刘柏霄

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html引入jquery_Web前端之jQuery

1、jQuery是一个快速，小巧，功能丰富的JavaScript库。jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。var el = document.getElementById("start");el.innerHTML = "出发吧,骚年!";$("#start").html("出发吧,骚年!");jQuery的代码将在所有主流浏览器中运行完全相同，包括In...
复制链接

扫一扫