jQuery来了--定义，引用，语法，文档就绪事件，选择器

最新推荐文章于 2022-04-19 19:55:16 发布

panlu666_pl

最新推荐文章于 2022-04-19 19:55:16 发布

阅读量274

点赞数

分类专栏： jQuery来了文章标签： jquery 选择器文档就绪事件

本文链接：https://blog.csdn.net/panlu666_pl/article/details/70878022

版权

jQuery来了专栏收录该内容

8 篇文章 0 订阅

订阅专栏

定义

jQuery是一个JavaScript库

引用

在HTML中引用jQuery：

<head>
  <script src="jquery.js"></script>
</head>

再将下载的jquery文件放在网页的同一目录下，jQuery会生效

语法

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

selector：选择符。“查询”和“查找”HTML元素
action()：执行对元素的操作

文档就绪事件

将jQuery函数包含于document ready函数中：

$(document).ready(function(){   //实现文档就绪
    //jQuery代码
});

目的：防止文档在完全加载之前运行jQuery代码

实现文档就绪的另一方法（与↑写法效果相同）：

$(function(){
    //jQuery代码 
});

选择器

jQuery中所有选择器都以美元符号开头：$()

元素选择器

jQuery 元素选择器基于元素名选取元素

例.
用户点击按钮后，所有<p>元素都被隐藏：

$(document).ready(function(){
   $("button").click(function(){
      $("p").hide();
   });
});

id选择器

jQuery #id选择器通过HTML元素的id属性选取指定的元素

语法：$("#test")

例.
用户点击按钮后，id=”test”属性的元素将被隐藏：

$(document).ready(function(){
   $("button").click(function(){
      $("#test").hide();
   });
});

.class选择器

jQuery 类选择器通过指定的class查找元素

语法：$(".test")

例.
用户点击按钮后，所有class=”test”属性的元素将被隐藏：

$(document).ready(function(){
  $("button").click(function(){
      $(".test").hide();
   });
});

———————————————

更多选择方式：

语法                  描述

$("*")              选取所有元素
$("this")           选取当前HTML元素

$("p.demo")         选取所有class为demo的<p>元素
$("p:first")        选取第一个<p>元素
$("ul li:first")    选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") 选取每个<ul>元素的第一个<li>元素

$("[href]")         选取带有href属性的元素
$("a[target='_blank']")  选取所有target属性值="_blank"的<a>元素
$("a[target!='_blank']")  选取所有target属性值不等于"_blank"的<a>元素

$(":button")        选取所有type="button"的<input>元素和<button>元素 （即选取所有按钮）

$("tr:even")        选取偶数位置的<tr>元素
$("tr:odd")         选取奇数位置的<tr>元素

panlu666_pl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery来了--定义，引用，语法，文档就绪事件，选择器

定义jQuery是一个JavaScript库引用在HTML中引用jQuery：<head> <script src="jquery.js"></script></head>再将下载的jquery文件放在网页的同一目录下，jQuery会生效语法基础语法：$(selector).action()selector：选择符。“查询”和“查找”HTML元素action()：执行对元素的操作文档就绪
复制链接

扫一扫