HTML之jQuery自学笔记(一)

jQuery 安装

在jQuery官网上可以下载

有两种版本可供下载,根据个人喜好下载。

Production version - 用于实际的网站中,已被精简和压缩。

Development version - 用于测试和开发(未压缩,是可读的代码)

如果不喜欢下载并存放jQuery,那么可以从谷歌或者微软的服务器引用它,

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>   //谷歌
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>   //微软
</head>

jQuery 库 

jQuery 是一个JavaScript函数库,它包含了以下特性:

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities

从本质上来说,jQuery就是一个JavaScript库,它本身就是一个.js文件,其中包含了所有的jQuery函数

可以通过scr属性吧jQuery添加到网页中:

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

需要注意的是,src是你下载的jquery.js的路径,一般你下载下来以后后面会带版本号,你可以把版本号删掉,只保留jquery,输入也比较简单。而且,这个script标签一定要写在head中。其次,脚本并不是写在这一个标签里面,而是在下面重新写一对script标签,再在里面写,大概就是这个样子:

<script type="text/javascript" src="jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").hide();
				});
			});
		</script>

jQuery 语法

$(selector).action()

jQuery选择器是CSS的选择器语法的组合

示例:

$(this).hide()        隐藏当前的HTML元素

$("#test").hide()   隐藏id="test"的元素

$("p").hide()         隐藏所有<p>元素

$(".test").hist()      隐藏所有class="test"的元素

文档就绪函数

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

$(document).ready(funtion(){
    这里写jQuery函数
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

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");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值