您的位置：首页 > Web前端 > JQuery

JavaWeb基础—jQuery与Ajax

2019-03-19 22:00 676 查看

jQuery与Ajax

1.jQuery介绍与下载安装

jQuery是一个JavaScript库，用于简化页面开发的过程。jQuery的核心是选择器，用于对页面元素的查找和获取。

什么是JavaScript库？

简化JavaScript开发，第三方厂商自主开发JavaScript。主流的JavaScript库有：jQuery、Vue.js、AngularJs、React...

1.下载与安装：

作为一个轻量级的JS库，jQuery采用独立的文件进行发布。

http://jquery.com/download/

有两种版本，第一种是源码版(非压缩)另一个种是非源码版(压缩)。源码版通常在开发中使用，反之非源码版则在实际使用中使用。

2.jQuery选择器实验室

在输入框中输入"a"，所有的a标签都会高亮；输入span标签则所有的span标签会高亮。

[code]<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>

<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>

</head>

<body>
<div class="section">
<h2>jQuery选择器实验室</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px">选择</button>
<hr />
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
style="color: darkgreen" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
</span>
</li>
</ul>

<span class="myclass ">我是拥有myclass类的span标签</span>

<p class="myclass">我是拥有myclass的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" /> 密码：<input
type="password" name="upsd" value="123456" />
</div>
<div>
婚姻状况： <select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" /> <input type="reset" value="重置" />
</div>
</form>
</div>
</div>

<!--
1 要绑定按钮单击事件
2 导入jquery
-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
document.getElementById("btnSelect").onclick = function(){
// $()是jquery选择器方法
var value= document.getElementById("txtSelector").value;

// 删除class
$("*").removeClass("highlight");
$(value).addClass("highlight");
}
</script>
</body>
</html>

2.jQuery常用选择器

$("#id")：id选择器，通过#+id值的方式来查找该id值的元素

$("标签")：标签选择器

$(".class")：类选择器

$("s1,s2,s3")：组合选择器

1.层叠与属性选择器

层叠选择器：根据元素的位置来获取元素

属性选择器：根据元素的属性值来获取元素

2.位置与表单选择器(不常见)

位置选择器：通过指定的位置获得对应的元素，例如："获取第三个元素"

表单选择器：获得表单元素的简化形式，例如：获得所有文本框

3.jQuery操作元素属性

attr(name|properties|key)——获取或设置元素属性

removeAttr(name)——移除元素属性

[code]<!DOCTYPE html >

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮css类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>

</head>

<body>
<div class="section">
<h2>jQuery操作元素属性</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px">选择</button>
<hr />
<div>
<p id="welcome">欢迎来到选择器实验室</p>
<ul>
<li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a
style="color: darkgreen" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a
style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span>
<a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a>
</span>
</li>
</ul>

<span class="myclass ">我是拥有myclass类的span标签</span>

<p class="myclass">我是拥有myclass的p标签</p>
<form id="info" action="#" method="get">
<div>
用户名：<input type="text" name="uname" value="admin" /> 密码：<input
type="password" name="upsd" value="123456" />
</div>
<div>
婚姻状况： <select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" /> <input type="reset" value="重置" />
</div>
</form>
</div>
</div>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 获取
var href_value = $("a[href*='163']").attr("href");
alert(href_value);

// 设置
$("a[href*='163']").attr("href","http://www.baidu.com");

// 获得
var a = $("a").attr("href");
alert(a);

// 删除
$("a").removeAttr("href");
</script>
</body>
</html>

4.操作元素CSS属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航