首页>web前端>正文

学习jQuery，这篇文章足够了，jQuery学习资料免费发送中

时间：2019-03-21 10:42:37 来源：公众号：嗨码歌阅读：

开篇寄语：

当你无法改变周遭环境时，至少可以调整自己的心态去面对它。

感觉很难时，告诉自己：再坚持一下，别辜负了曾经经历的苦难与磨练。

从这一篇开始，我们开始学习jQuery。

一、jQuery的下载安装

1、官网

jQuery官网：http://jquery.com/

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培训班

大数据高手培训班

零基础大数据培训班

首页

课程中心

专家师资

最新就业

视频下载

报名流程

关于我们