jQuery 入门到精通学习教程，收藏我这篇就够了，Alibaba 高并发业务实战文档

• siblings() 表示获取其它同级元素

• find("选择器名称") 表示获取指定选择器的元素

六、获取和设置元素内容

html 方法的使用

jquery 中的 html 方法可以获取和设置标签的 html 内容

示例代码:

<script>

$(function(){

var $div=$("#div1");

// 获取标签的 html 内容

var result = $div.html();

alert(result);

// 设置标签的 html 内容，之前的内容会清除

$div.html("<span style='color:red'>你好</span>");

// 追加 html 内容

$div.append("<span style='color:red'>你好</span>");

});

</script>

<div id="div1">

<p>hello</p>

</div>

说明:

给指定标签追加 html 内容使用 append 方法

小结

• 获取和设置元素的内容使用: html 方法

• 给指定元素追加 html 内容使用: append 方法

七、获取和设置元素属性

?prop 方法的使用

之前使用 css 方法可以给标签设置样式属性，那么设置标签的其它属性可以使用 prop 方法了。

示例代码:

<style>

.a01{

color:red;

}

</style>

<script>

$(function(){

var $a=$("#link01");

var $input=$('#input01')

// 获取元素属性

var sId = $a.prop("id");

alert(sId);

// 设置元素属性

$a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

// 获取 value 属性

// var sValue = $input.prop("value");

// alert(sValue);

// 获取 value 属性使用 val()方法的简写方式

var sValue = $input.val();

alert(sValue);

// 设置 value 值

$input.val("222222");

})

</script>

<a id="link01">这是一个链接</a>

<input type="text" id="input01" value="111111">

说明:?获取 value 属性和设置 value 属性还可以通过 val 方法来完成。

小结

• 获取和设置元素属性的操作可以通过 prop 方法来完成

• 获取和设置元素的 value 属性可以通过 val 方法来完成，更加简单和方便

八、jQuery 事件

常用事件

• click() 鼠标单击

• blur() 元素失去焦点

• focus() 元素获得焦点

• mouseover() 鼠标进入（进入子元素也触发）

• mouseout() 鼠标离开（离开子元素也触发）

• ready() DOM 加载完成

示例代码:

<script>

$(function(){

var $li=$('.list li');

var $button=$('#button1')

var $text=$("#text1");

var $div=$("#div1")

// 鼠标点击

$li.click(function(){

// this 指的是当前发生事件的对象，但是它是一个原生 js 对象

// this.style.background = 'red';

// $(this) 指的是当前发生事件的 jquery 对象

$(this).css({'background':'gold'});

// 获取 jquery 对象的索引值,通过 index() 方法

alert($(this).index());

});

// 一般和按钮配合使用

$button.click(function(){

alert($text.val());

});

// 获取焦点

$text.focus(function(){

$(this).css({'background':'red'});

});

// 失去焦点

$text.blur(function(){

$(this).css({'background':'white'});

});

// 鼠标进入

$div.mouseover(function(){

$(this).css({'background':'gold'});

});

// 鼠标离开

$div.mouseout(function() {

$(this).css({'background':'white'});

});

});

</script>

<div id="div1">

<ul class="list">

<li>列表文字</li>

<li>列表文字</li>

<li>列表文字</li>

</ul>

<input type="text" id="text1">

<input type="button" id="button1" value="点击">

</div>

说明:

• this 指的是当前发生事件的对象，但是它是一个原生 js 对象

• $(this) 指的是当前发生事件的 jquery 对象

小结

jQuery 常用事件:

• click() 鼠标单击

• blur() 元素失去焦点

• focus() 元素获得焦点

• mouseover() 鼠标进入（进入子元素也触发）

• mouseout() 鼠标离开（离开子元素也触发）

• ready() DOM 加载完成

九、事件代理

事件代理介绍

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件冒泡代码:

<script>

$(function(){

var $div1=$('#div1');

var $div2=$('#div2');

$div1.click(function(){

alert($(this).html());

});

$div2.click(function(){

alert($(this).html());

});

});

</script>

<div id="div1" style="width:200px; height:200px; background: red;">

<div id="div2" style="width:100px; height:100px;background: yellow;">

哈哈

</div>

</div>

说明:

当点击子元素 div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

事件代理的使用

一般绑定事件的写法:

$(function(){

$ali=$('#list li');

$ali.click(function() {

$(this).css({background:'red'});

});

})

<ul id="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

事件代理的写法

$(function(){

$list=$('#list');

// 父元素 ul 来代理 子元素 li 的点击事件

$list.delegate('li', 'click', function() {

// $(this)表示当前点击的子元素对象

$(this).css({background:'red'});

});

})

<ul id="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

delegate 方法参数说明:

delegate(childSelector,event,function)

• childSelector: 子元素的选择器

• event: 事件名称，比如: 'click'

• function: 当事件触发执行的函数

小结

• 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。

• 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。

• 事件代理使用是使用 delegate 方法来完成

十、JavaScript 对象

JavaScript 对象的介绍

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

JavaScript 创建对象操作

创建自定义 javascript 对象有两种方式:

• 通过顶级 Object 类型来实例化一个对象

• 通过对象字面量创建一个对象

Object 类创建对象的示例代码:

<script>

var person = new Object();

// 添加属性：

person.name = 'tom';

person.age = '25';

// 添加方法：

person.sayName = function(){

alert(this.name);

}

// 调用属性和方法：

alert(person.age);

person.sayName();

</script>

对象字面量创建对象的示例代码:

<script>

var person2 = {

name:'Rose',

age: 18,

sayName:function(){

alert('My name is' + this.name);

}

}

// 调用属性和方法：

alert(person2.age);

person2.sayName();

</script>

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

小结

创建自定义 javascript 对象有两种方式:

• Object

• 字面量

十一、json

json 的介绍

json 是 JavaScript Object Notation 的首字母缩写，翻译过来就是 javascript 对象表示法，这里说的 json 就是类似于 javascript 对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的 xml 数据格式。

json 的格式

json 有两种格式：

1. 对象格式

2. 数组格式

对象格式:

对象格式的 json 数据，使用一对大括号({})，大括号里面放入 key:value 形式的键值对，多个键值对使用逗号分隔。

对象格式的 json 数据:

{

"name":"tom",

"age":18

}

格式说明:

json 中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的 json 数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的 json 数据:

["tom",18,"programmer"]

实际开发的 json 格式比较复杂,例如:

{

"name":"jack",

"age":29,

"hobby":["reading","travel","photography"]

"school":{

"name":"Merrimack College",

"location":"North Andover, MA"

}

}

json 数据转换成 JavaScript 对象

json 本质上是字符串，如果在 js 中操作 json 数据，可以将 json 字符串转化为 JavaScript 对象。

示例代码:

var sJson = '{"name":"tom","age":18}';

var oPerson = JSON.parse(sJson);

// 操作属性

alert(oPerson.name);

alert(oPerson.age);

小结

• json 就是一个 javascript 对象表示法，json 本质上是一个字符串。

• json 有两种格式：1. 对象格式, 2. 数组格式

十二、ajax

1. ajax 的介绍

ajax 是 Asynchronous JavaScript and XML 的简写，ajax 一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax 可以发送 http 请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用 ajax 了。

这里提示一下大家,?在 html 页面使用 ajax 需要在 web 服务器环境下运行, 一般向自己的 web 服务器发送 ajax 请求。

2. ajax 的使用

jquery 将它封装成了一个方法 $.ajax()，我们可以直接用这个方法来执行 ajax 请求。

示例代码:

<script>

$.ajax({

// 1.url 请求地址

url:'http://t.weather.sojson.com/api/weather/city/101010100',

// 2.type 请求方式，默认是'GET'，常用的还有'POST'

type:'GET',

// 3.dataType 设置返回的数据格式，常用的是'json'格式

dataType:'JSON',

// 4.data 设置发送给服务器的数据, 没有参数不需要设置

?

// 5.success 设置请求成功后的回调函数

success:function (response) {

console.log(response);

},

// 6.error 设置请求失败后的回调函数

error:function () {

alert("请求失败,请稍后再试!");

},

// 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写

async:true

});

</script>

ajax 方法的参数说明:

1. url 请求地址

2. type 请求方式，默认是'GET'，常用的还有'POST'

3. dataType 设置返回的数据格式，常用的是'json'格式

4. data 设置发送给服务器的数据，没有参数不需要设置

5. success 设置请求成功后的回调函数

6. error 设置请求失败后的回调函数

7. async 设置是否异步，默认值是'true'，表示异步，一般不用写

8. 同步和异步说明

• 同步是一个 ajax 请求完成另外一个才可以请求，需要等待上一个 ajax 请求完成，好比线程同步。

• 异步是多个 ajax 同时请求，不需要等待其它 ajax 请求完成， 好比线程异步。

ajax 的简写方式:

$.ajax按照请求方式可以简写成$.get 或者 $.post 方式

ajax 简写方式的示例代码:

<script>

$(function(){

/*

1. url 请求地址

2. data 设置发送给服务器的数据, 没有参数不需要设置

3. success 设置请求成功后的回调函数

4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式

*/

$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){

console.log(dat);

console.log(status);

alert(dat);

}).error(function(){

alert("网络异常");

});

/*

1. url 请求地址

2. data 设置发送给服务器的数据, 没有参数不需要设置

3. success 设置请求成功后的回调函数

4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式

*/

$.post("test.php", {"func": "getNameAndTime"}, function(data){

alert(data.name);

console.log(data.time);

}, "json").error(function(){

最后

Python 崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS 等更加高级的领域。Python 可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python 可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！

??Python 所有方向的学习路线??

Python 所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

??Python 必备开发工具??

工欲善其事必先利其器。学习 Python 常用的开发软件都在这里了，给大家节省了很多时间。

??Python 全套学习视频??

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。

??实战案例??

学 python 就与学数学一样，是不能只看书不做题的，直接看步骤和答案会让人误以为自己全都掌握了，但是碰到生题的时候还是会一筹莫展。

因此在学习 python 的过程中一定要记得多动手写代码，教程只需要看一两遍即可。

??大厂面试真题??

我们学习 Python 必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。