Python全栈 Web（jQuery 一条龙服务）-白红宇

jQuery

1.jQuery介绍

jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式

核心理念:Write Less Do More

jQuery版本:

jQuery 2.x 不再支持IE6.7.8

jQuery 1.11.x

2.使用jQuery

1.引入jQuery文件

注意:jQuery文件的引入操作必须要放在其他jQuery操作之前

3.jQuery对象

1.什么是jQuery对象

jQuery对象是由jQuery对页面元素进行封装后的一种体现

jQuery中所提供的所有的操作都只针对jQuery对象,DOM对象不能用

2.工厂函数 -

$()

作用:

1.能够获取 jquery对象

2.能够将DOM对象转换为 jquery 对象

语法:

$(选择器/DOM对象);

$()能够将选择器和 DOM对象封装成jQuery对象进行返回

3.DOM对象和 jQuery对象之间的转换

DOM对象:只能使用DOM提供的操作,不能使用jQuery操作

jQuery对象:只能使用jQuery操作,不能使用DOM操作

1.将DOM对象转换为jQuery对象

语法:

var 变量 = $(DOM对象);

注意:所有的jQuery对象在起名的时候,最好在变量名称前+$,用于区分与DOM对象的区别

2.将jQuery对象转换为DOM对象

1. var dom对象 = jQuery对象.get(0)

2. var dom对象 = jQuery对象[0]

4.jQuery选择器

1.作用

获取页面上的元素们,返回值都是由JQ对象所组成的数组.

语法: $("选择器");

2.选择器详解

1. 基础选择器

1. ID选择器

$('#id');

返回id属性值为指定id的元素对象

2. 类选择器

$(".className");

返回指定类名对象的元素

3. 标签选择器

$('element');

返回指定标签名对应的元素

4. 群组选择器

$('selector1,selector2,...');

2.层级选择器

1.$("selector1+selector2")

名称:相邻兄弟选择器

作用:匹配紧紧跟在selector1后面且满足selector2选择器的元素

2.$("selector1~selector2")

名称:通用兄弟选择器

作用:匹配selector1后面所有满足selector2选择器的元素

3.基本过滤选择器

1. :first

只匹配到第一个元素

2. :last

只匹配到最后一个元素

3. :not(selector)

将满足selector选择器的元素排除出去

4. :odd

匹配偶数行元素 (奇数下标)

5. :even

匹配奇数行元素 (偶数下标)

6. :eq(index)

匹配下标等于index的元素

7. :gt(index)

匹配下标大于index的元素

8. :lt(index)

匹配下标小于index的元素

4.属性选择器

1.[attribute]

作用:匹配包含指定属性的元素

ex: $("div[id]");

2.[attribute=value]

作用:匹配属性值为value的元素

ex:

$("div[id=main]") -> $("#main");

$("[type=text]");

3.[attribute!=value]

作用:匹配属性值不是value的所有元素

4.[attribute^=value]

作用:匹配属性值以value字符作为开始的元素

5.[attribute$=value]

作用:匹配属性值以value字符作为结尾的元素

6.[attribute*=value]

作用:匹配属性值中包含value字符的元素

5.子元素过滤选择器

1.:first-child

匹配属于其父元素中的首个子元素

2.:last-child

匹配属于其父元素中的最后一个子元素

3.:nth-child(n)

匹配属于其父元素中的第n个子元素

:nth-child(1) --> :first-child

jQuery操作DOM

1.基本操作

1.html()

作用：获取或设置 jQuery对象的HTML内容

等同于 innerHTML

ex:

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

console.log($div.html());

$div.html("动态设置的文本");

2.text()

作用：纯文本内容

等同于：innerText

3.val()

作用:获取或设置表单控件的 value 值

等同于 : value

2.属性操作

1.attr()

作用:读取或设置 jQuery对象的属性值

ex:

1.$obj.attr("id");

获取 $obj 对象的id属性值

2.$obj.attr("id","container")

设置 $obj 对象的id属性值为 container

2.removeAttr("attrName")

作用:删除 jquery对象的 attrName 属性

ex:

$obj.removeAttr("class");

3.样式操作

1.attr("class","className")

使用 attr() 绑定className 值到jq对象的class属性上

2.addClass("className")

作用:追加className选择器到jq对象的class属性后

返回值:jq对象

var $obj = $("#obj");

ex:

$obj = $obj.addClass("c1");

结果:<div id="obj" class="c1"></div>

$obj = $obj.addClass("c2");

结果:<div id="obj" class="c1 c2"></div>

以上两个操作,可以简化为:

(连缀调用)

$obj.addClass("c1").addClass("c2").html();

3.removeClass("className")

作用:将className属性值从 class 属性中移除

4.removeClass()

作用:清空class属性值

5.toggleClass("className")

切换样式:

元素如果具备className属性值,则删除

元素如果没有className属性值,则添加

6.css("css属性名")

作用:获取对应css属性的值

ex:

$obj.css("id")

作用:获取$obj对象的id属性值

7.css("css属性名","css属性值")

作用:为元素设置css属性值

8.css(JSON对象)

JSON对象类似于 PYTHON中字典的写法

ex:

$obj.css({

"color":"red",

"background-color":"orange"

}

);

4.遍历节点

1.children() / children(selector)

作用:获取jq对象的所有子元素或带有指定选择器的子元素

注意:只考虑子代元素,不考虑后代元素

2.next() / next(selector)

作用:获取jq对象的下一个兄弟元素/满足selector的下一个兄弟元素

3.prev() / prev(selector)

作用:获取jq对象的上一个兄弟元素/满足selector的上一个兄弟元素

4.siblings() / siblings(selector)

作用:获取jq对象的所有兄弟节点 / 满足selector的所有兄弟

5.find(selector)

作用:获取满足selector选择器的所有后代元素

6.parent()

作用:查找jq对象的父元素

5.创建元素 & 插入元素

1.创建元素

语法:var $obj = $("创建的内容");

注意:创建的内容必须是标记

ex:

1.创建一对div

var $div = $("<div id='xxx'>xxxxx</div>");

2.创建一对button

var $btn = $("<button></button>");

$btn.attr("id","btnDelete");

$btn.html("删除");

2.插入元素

1.内部插入

1.$obj.append($new);

将$new元素插入到$obj中最后一个子元素位置处

2.$obj.prepend($new);

将$new元素插入到$obj中第一个子元素的位置处

2.外部插入

作为兄弟元素插入到网页中

1.$obj.after($new);

将$new作为$obj的下一个兄弟节点插入到网页中

2.$obj.before($new);

将$new作为$obj的上一个兄弟节点插入到网页中

document.createElement("div");

$("div")

$("<div></div>");

2.jQuery中的事件处理

1.DOM加载完成后的操作

1. $(document).ready(function(){

//DOM树加载完毕后要执行的操作

//相当于是页面初始化

});

2. $().ready(function(){

//效果同上

});

3. $( function(){

//效果同上

} );

2.jQuery事件绑定

1.方式1

$obj.bind("事件名称",事件处理函数);

ex:

$obj.bind("click",function(){

});

$obj.事件名称(function(){

});

ex:

$obj.click(function(){

xxxxx

});

常用事件

$obj.click(fn);

$obj.mouseover(fn);

$obj.mousemove(fn);

$obj.mouseout(fn);

$obj.keydown(fn);

$obj.keypress(fn);

$obj.keyup(fn);

$obj.focus(fn);

$obj.blur(fn);

$obj.change(fn);

$obj.submit(fn);

3.事件中的this

在jquery事件中,this表示的就是触发当前事件的DOM对象

4.事件对象 - event

在绑定事件的时候,允许传递 event 参数来表示事件对象

1.$obj.bind("事件名称",function(event){

event 表示的就是事件对象

});

2.$obj.事件名称(function(event){

event 表示的就是事件对象

});

event的使用方式与原生JS事件中的事件对象一致

1.事件源

event.target

2.鼠标事件

event.offsetX : 在元素上的横坐标

event.offsetY : 在元素上的纵坐标

3.键盘事件

event.which : 键位码或ASCII码

5.激发事件操作

$obj.事件名称();

ex:

$obj.click(); //触发$obj的click事件

$obj.click(function(){}); //为$obj绑定click事件

3.jQuery删除节点

1.remove()

语法:$obj.remove();

作用:删除$obj元素

2.remove("selector")

语法:$obj.remove("selector");

作用:将满足selector选择器的元素删除

3.empty()

语法:$obj.empty();

作用:清空 $obj 内容

4.jQuery 遍历操作

方法:each()

1.循环遍历 jQuery 数组

$obj.each(function(i,obj){

i : 循环出来的元素的下标

obj : 循环出来的元素(DOM元素)

});

2.循环遍历 JS数组(原生)

1.将原生数组通过$()转换成jQuery数组

$.each(原生数组,function(i,obj){

i : 遍历出来的下标

obj : 遍历出来的元素

});