上海切换校区
全国报名热线
15201841284
学习jQuery，这篇文章足够了，jQuery学习资料免费发送中
时间：2019-03-21 10:42:37 来源：公众号：嗨码歌 阅读：开篇寄语：
jQuery官网：http://jquery.com/
当你无法改变周遭环境时，至少可以调整自己的心态去面对它。
感觉很难时，告诉自己：再坚持一下，别辜负了曾经经历的苦难与磨练。
从这一篇开始，我们开始学习jQuery。
一、jQuery的下载安装
1、官网
2、版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
完整版 : jquery-3.3.1.js -> 学习版本(学习源码 向高手学习时最好的学习方法)
压缩版 : jquery-3.3.1.min.js -> 开发版本(压缩版，减少传输)
3、优点
-
提供了强大的功能函数
-
解决浏览器兼容性问题
-
实现丰富的 UI 和插件
-
纠正错误的脚本知识
等等...我们一起学习与发现
4、安装
在html页面引入jQuery文件即可
<!-- 引入jQuery文件 --> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
二、jQuery核心
$符号在 jQuery 中代表对jQuery对象的引用， jQuery是核心对象，通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
$ 等价于 jQuery
三、jQuery选择器
和使用js操作DOM一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的DOM 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,
其他用到再查阅。
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
http://www.w3school.com.cn/jquery/jquery_selectors.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器</title>
</head>
<body>
<h3>jQuery选择器</h3>
<div id="mydiv1">id选择器<span><p>span中的内容</p></span></div>
<div id="mydiv2" class="clazz">元素选择器</div>
<span class="clazz">类选择器</span>
<input id="inp" type="text" value="我是一个输入框" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// ----------------------id选择器----------------------
console.log("-----id选择器-----");
var mydiv1 = $('#mydiv1');
console.log(mydiv1.html()); // 等价于DOM: 元素.innerHTML
console.log(mydiv1.text()); // 等价于DOM: 元素.innerText
var inp = $("#inp");
console.log(inp.val()); // 等价于DOM: 元素.value
// ----------------------元素选择器----------------------
console.log("-----元素选择器-----");
var divs = $('div'); // 有多个div元素
divs.each(function() {
// $(this)是当前循环的每一个对象
console.log($(this).index() + "---" + $(this).text());
});
// ----------------------类选择器，class----------------------
console.log("-----类选择器-----");
var dv = $('.clazz'); // 有多个class="clazz"的元素
dv.each(function() {
// $(this)是当前循环的每一个对象
console.log($(this).text());
});
// ----------------------通用选择器：*----------------------
console.log("-----通用选择器-----");
var all = $("*");
console.log(all.length);
all.each(function() {
// $(this)是当前循环的每一个对象
console.log($(this));
});
// ----------------------组合选择器----------------------
console.log("-----组合选择器-----");
var divs = $('div, span, .clazz');
divs.each(function() {
// $(this)是当前循环的每一个对象
console.log($(this).prop("tagName") + "---" + $(this).text());
});
// ----------------------后代选择器----------------------
console.log("-----后代选择器-----");
var descendant = $('#mydiv1 span p');
descendant.each(function() {
console.log($(this).html());
});
</script>
</body>
</html>
四、jQuery操作DOM
jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式；动画操作等。注意：以下的操作方式只适用于jQuery对象。
1、操作元素的属性
遍历元素
each()
$(selector).each(function(index, element))遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery遍历元素</title>
</head>
<body>
<h3>遍历元素 each()</h3>
<span class="red">jQuery<b>段落</b></span>
<span class="blue">Python</span>
<span class="red">Java</span>
<span class="blue">CSS</span>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// each()遍历获取到的是DOM对象
$('span').each(function(idx, e) {
console.log(idx + " -> " + $(e).text() + ' -> ' + $(e).index());
});
</script>
</body>
</html>
获取属性
注意：
attr()：操作 checkbox 时选中返回 checked，没有选中返回 undefined
prop()：可以获取元素名称prop("tagName")，获取 checkbox 建议使用prop()，attr()无法获取变化的checkbox，只可以获取静态的状态，而prop()都可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery获取属性</title>
</head>
<body>
<h3>jQuery获取属性</h3>
<form action="" id="myform">
<input type="checkbox" name="ch" checked="checked" /> aa
<input type="checkbox" name="ch" /> bb
</form>
<button id="btn" type="button">测试按钮</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 获取属性
function getAttr() {
var inp = $("input");
console.log(inp);
// 手动勾选bb之后attr()依旧返回undefined，prop()返回true
inp.each(function(idx, em) {
console.log(idx + "---" + $(em));
console.log($(em).attr('checked') + "---" + $(em).prop('checked'));
console.log($(e).attr("name"));
console.log($(e).attr("type"));
console.log('---------------------------------');
});
}
// 绑定事件执行函数
$('#btn').click(getAttr);
</script>
</body>
</html>
设置属性
移除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery移除属性</title>
</head>
<body>
<h3>jQuery移除属性</h3>
<form action="" id="myform">
<input type="checkbox" name="ch" checked="checked" /> aa
<input type="checkbox" name="ch" checked="checked" /> bb
</form>
<button id="btn" type="button">测试按钮</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 移除属性
function delAttr() {
var inp = $("input[name='ch']");
console.log(inp);
inp.each(function(idx, em) {
$(em).removeAttr('checked');
});
}
// 绑定事件执行函数
$('#btn').click(delAttr);
</script>
</body>
</html>
2、操作元素的样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
增加元素的具体样式，格式：
a. css({"样式名":"样式值", "样式名2":"样式值2"})
例：css({"background-color":"red", "color":"#fff"});
b. css("样式名", "样式值")
例：css("color", "white");
移除全部使用removeAttr("style")
移除单个使用css("属性"，"");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery操作样式</title>
<style type="text/css">
div {
width: 200px;
padding: 10px;
}
.blue {
background: blue;
color: #fff;
}
</style>
</head>
<body>
<h3>jQuery操作样式</h3>
<div id="blue_div">蓝色</div>
<div id="red_div">红色</div>
<button type="button" id="add_btn">添加样式</button>
<button type="button" id="remove_btn">移除样式</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 添加样式
// 第一种 当做属性处理
function addAttr() {
var blue_div = $('#blue_div');
// 直接添加class属性
blue_div.attr('class', 'blue');
// 或者使用style添加样式
//blue_div.attr("style", "background: blue;color: #fff;");
}
// 移除样式
function delAttr() {
var blue_div = $('#blue_div');
blue_div.removeAttr('class');
// 移除所有
//blue_div.removeAttr('style');
}
// 第二种 使用指定方法css()
// 添加样式
function addCss() {
var blue_div = $('#blue_div');
blue_div.css({
'background': 'blue',
'color': '#fff'
});
}
// 移除样式
function delCss() {
var blue_div = $('#blue_div');
blue_div.css({
'background': '',
'color': ''
});
// 移除所有
//blue_div.removeAttr('style');
}
// 绑定事件
$('#add_btn').click(addAttr);
$('#remove_btn').click(delAttr);
</script>
</body>
</html>
3、操作元素的内容
对于元素还可以操作其中的内容，例如文本，值，甚至是html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作内容</title>
</head>
<body>
<h3><span>jQuery操作内容</span></h3>
<button type="button" id="btn">测试按钮</button>
<div id="html"><p>div1</p></div>
<div id="text"><p>div2</p></div>
<input type="text" name="uname" value="jQuery" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$("#btn").click(function() {
// 获取HTML内容，包括HTML标签
console.log($('h3').html());
// 获取文本内容，不包括HTML标签
console.log($('h3').text());
// 获取value值
console.log($('[name=uname]').val());
// 设置内容
$('#html').html("<p>使用html设置，看不到标签</p>");
$('#text').text("<p>使用text设置，能看到标签</p>");
$('[name=uname]').val("哈哈哈");
});
</script>
</body>
</html>
4、创建元素
在jQuery中创建元素很简单，直接使用核心函数即可。
$('元素内容');
$('<p>我是一个p元素</p>');
5、添加元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery添加元素</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<h3>jQuery_添加元素</h3>
<p>prepend()前追加内容</p>
<p>prependTo()前追加内容</p>
<p>append()后追加内容</p>
<p>appendTo()后追加内容<p>
<span class="red"><b>Java</b></span>
<span class="blue"><b>Python</b></span>
<div class="yellow">
<span><b>jQuery</b></span>
</div>
<button type="button" id="btn">测试按钮</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var create_span = "<span id='mydiv' style='width: 200px;background-color:black;color: white;'>动态创建span</span>";
// 1、prepend()前追加内容
function prependFunc() {
// 在body元素内最前面添加指定元素
$("body").prepend(create_span);
}
// 2、prependTo()前追加内容
function prependToFunc() {
// 将指定元素添加至body元素内最前面
$("<b>开头</b>").prependTo('body');
}
// 3、append()后追加内容
function appendFunc() {
// 在body元素内最后面添加指定元素
$("body").append(create_span);
// 把已存在的元素添加到另一处的时候相当于移动
//$("div").append($('.red'));
}
// 4、appendTo()后加内容
function appendToFunc() {
// 将指定元素添加至body元素内最后面
$(create_span).appendTo('p');
// 把已存在的元素添加到另一处的时候相当于移动
//$('.blue').appendTo("div");
}
var btn = $("#btn");
btn.click(appendToFunc);
</script>
</body>
</html>
6、删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery删除元素</title>
<style type="text/css">
span {
color: white;
padding: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<h3>jQuery删除元素</h3>
<span class="red">jQuery<b>段落</b></span>
<span class="blue">Python</span>
<span class="red">Java</span>
<span class="blue">CSS</span>
<button type="button">测试按钮</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function delElement() {
// 清空元素
//$("span").empty();
// 删除所选元素或指定的子元素
$("span").remove();
$("span b").remove();
// 删除样式为blue的span
//$("span.blue").remove();
// 清空样式为red的元素
//$(".red").empty();
}
$('button').click(delElement);
</script>
</body>
</html>
今日jQuery分享到这里，下一篇我们一起学jQuery事件。（分享自：公众号 嗨码歌）
更多Java及前端技术资料，学习视频请联系客服小姐姐获取。上海尚学堂Java大数据免费试学名额申请中，赶快领取吧！
开班计划
- JAVA分布式+大数据基础班11-04抢座中
- JAVA分布式+大数据基础班11-11抢座中
- JAVA分布式+大数据实战班11-18抢座中
- JAVA分布式+大数据基础班12-09抢座中
JAVA培训班
热门文章
- 1Web服务器与Web应用服务器的区别和关系
- 2Web前端和后端开发有什么区别？为什...
- 3计算机之间是如何通信的？计算机网络...
- 4在Spring Boot中使用Spring-data-jpa实现分页查询
- 5什么是函数式编程？函数式编程有什么...
- 6jQuery AJAX 方法 success()后台传来的4种数据
- 7vue2 前后端分离项目ajax跨域session问题解决
- 8DSA数字签名算法
学员感言
上海尚学堂校区地址：上海市浦东新区城丰路650号 咨询电话：15201841284
Copyright 2006-2017 上海尚学堂智能科技有限公司 的icp备案号 （沪ICP备16053543号）
Copyright 2006-2017 上海尚学堂智能科技有限公司 的icp备案号 （沪ICP备16053543号）