首页 > 其他分享 >jQuery(学习笔记1.0)

jQuery(学习笔记1.0)

时间:2023-03-26 19:09:54浏览次数:58  
标签:jQuery 1.0 href 元素 笔记 HTML intro 选择器


jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库包含以下特性:
HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

utilities

可以通过下面的标记把jQuery添加到网页中:

<script type="text/javascript" src="jquery.js">
        
</script>

下载jQuery

网址:https://code.jquery.com/jquery-3.6.4.js

里面就是当前最新的jQuery版本

jQuery(学习笔记1.0)_jquery

访问的时候有点恶心,不挂梯子需要刷好多遍才出来,挂了梯子秒出。吐槽一下

这个js文件保存到本地就可以了,以后使用的时候直接src里面导入的就是这个文件。

jQuery(学习笔记1.0)_前端_02

 还有就是在线使用CDN文件,感觉还是比较麻烦,直接下载下来完事。还是把另外的方式贴出来吧

//Google
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

//Microsoft
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

说一下使用CDN方法的优势:许多用户在访问其他站点时,已经从谷歌或微软加载过jQuery。所有结果是,当他们访问站点时,会从缓存中加载jQuery,这样可以减少加载时间。同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,可以提高加载速度。

通过jQuery,可以选取(查询,query)HTML元素,并对它们执行“操作”。

$(this).hide()

jQuery hide()函数,隐藏当前的HTML元素

$("#test").hide()

隐藏id="test"的元素

$("p").hide()

隐藏所有<p>元素

$(".test").hide()

隐藏所有class="test"的元素

jQuery语法

jQuery语法为HTML元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

美元符号定义jQuery

选择符(selector)“查询”和“查找”HTML元素

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

jQuery使用的语法是Xpath与css选择器语法的组合。

文档就绪函数

所有jQuery函数位于一个document ready函数中:

$(document).ready(function(){
    //jQuery functions go here
});

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

如果在文档没有完全加载之前就运行函数,操作可能失败。比如:

试图隐藏一个不存在的元素

获得未完全加载的图像大小

jQuery选择器

选择器允许对元素组或单个元素进行操作

在HTML术语中:

选择器允许对DOM元素组或单个DOM节点进行操作

jQuery元素选择器

jQuery使用css选择器来选取HTML元素

$("p")选取<p>元素

$("p.intro")选取所有class="intro"的<p>元素

$("p#demo")选取所有id="demo"的<p>元素

jQuery属性选择器

jQuery使用Xpath表达式来选择带有给定属性的元素

$("[href]")选取所有带有href属性的元素

$("[href='#']")选取所有带有href值等于“#”的元素

$("[href!='#']")选取所有带有href值不等于“#”的元素

$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素。

jQuery css选择器

jQuery css选择器可以改变HTML元素的css属性。

下面把所有p元素的背景颜色改变为红色:
 

$("p").css("background-color","red");

语法    描述
$(this)    当前 HTML 元素
$("p")    所有 <p> 元素
$("p.intro")    所有 class="intro" 的 <p> 元素
$(".intro")    所有 class="intro" 的元素
$("#intro")    id="intro" 的元素
$("ul li:first")    每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")    所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")    id="intro" 的 <div> 元素中的所有 class="head" 的元素

标签:jQuery,1.0,href,元素,笔记,HTML,intro,选择器
From: https://blog.51cto.com/u_15888443/6150674

相关文章

  • node.js 学习笔记
    阶段一1初始Node.jsjavascript运行环境1.2Node.js中的javacript运行环境1.3Node.js环境安装百度1.4node.js执行javaScript代码2fs文件系统模块2.1......
  • K8S学习笔记之卸载K8S集群
    阅读目录0x00概述0x01 操作0x00概述有时候需要卸载已安装在本机的K8S服务和服务,本文卸载的K8S面向使用kubeadm或者二进制方法安装的,不涉及使用rpm包安装的集群;......
  • Acer暗影骑士RTX3060 显卡最大功率95W笔记
    Acer暗影骑士RTX3060显卡默认85W,网上未见有人发过提高功率教程,自己摸索真机试了下说明:本文是本人亲测成功,型号暗影骑士NitroAN515-55,配置为Inteli710750+RTX3060,若是......
  • mysql 学习笔记
    ......
  • 计算机三级网络技术技巧课笔记
    本笔记是我在学习计算机三级视频过程中记录的,里面包括了B站两位up主“名副其实举世无双”和“吃饭不留名”的视频截图,可快速的帮助小伙伴轻松过计算机三级网络技术。1.......
  • Gin学习笔记--Gin Html模版渲染
    当后台html文件与前台html文件都存储在一个文件下,会显的很臃肿,这时我们需要将前台文件与后台文件区分开来,具体例子如下:案例代码:packagemainimport("github.co......
  • jenkins学习笔记之十七:使用插件及maven上传制品到nexus
    一、docker安装nexuswgethttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repoyumcleanall&&yummakecachefastuminstalldockersystemctlsta......
  • 【笔记】学点A*算法
    最近浅学了点A*算法的相关知识,记点笔记前置知识:启发式搜索定义:A*搜索算法(英文:A*searchalgorithm,A*读作A-star),简称A*算法,是一种在图形平面上,对于有多个节点的路......
  • dragonflydb 1.0 发布了
    就在昨天dragonflydb发布1.0了,同时也标志着可以生产可用了,同时也支持了masterreplication能力说明dragonflydb发展很快,目前来说还是缺少对于ha模式的支持,类似的keydb就......
  • Vue2学习笔记
    VUE官网:https://cn.vuejs.org/参考教程:https://v2.cn.vuejs.org/v2/guide快速入门<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>QuickVueEx......