手机企业网站多少钱/互联网营销师怎么报名
开篇寄语：
当你无法改变周遭环境时，至少可以调整自己的心态去面对它。
感觉很难时，告诉自己：再坚持一下，别辜负了曾经经历的苦难与磨练。
从这一篇开始，我们开始学习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文件即可
<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
<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: 元素.innerHTMLconsole.log(mydiv1.text()); // 等价于DOM: 元素.innerTextvar 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'); // 有多个的元素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是当前的元素。
<html><head><meta charset="UTF-8"><title>jQuery遍历元素title>head><body><h3>遍历元素 each()h3><span class="red">jQuery<b>段落b>span><span class="blue">Pythonspan><span class="red">Javaspan><span class="blue">CSSspan><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()都可以。
<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" /> bbform><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()返回trueinp.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>设置属性
移除属性
<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" /> bbform><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("属性"，"");
<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。
<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>div1p>div><div id="text"><p>div2p>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("使用html设置，看不到标签
");$('#text').text("使用text设置，能看到标签
");$('[name=uname]').val("哈哈哈");});script>body>html>4、创建元素
在jQuery中创建元素很简单，直接使用核心函数即可。
$('元素内容');
$('
我是一个p元素
');5、添加元素
<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>Javab>span><span class="blue"><b>Pythonb>span><div class="yellow"><span><b>jQueryb>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";// 1、prepend()前追加内容function prependFunc() {// 在body元素内最前面添加指定元素$("body").prepend(create_span);}// 2、prependTo()前追加内容function prependToFunc() {// 将指定元素添加至body元素内最前面$("开头").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、删除元素
<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">Pythonspan><span class="red">Javaspan><span class="blue">CSSspan><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事件。