jQuery(2)

2018-08-07 本文已影响5人 JessWang

一 jQuery对象与dom对象的关系

1. jquery对象和dom对象不能互相调用对方成员

原因: 它们不是平等关系,导致其成员也有层次划分.jquery对象是包含dom对象的

2. jquery对象如何封装dom对象

多个dom对象与jquery对象做合并

3.jquery对象和dom对象的转化

jquery对象 ---> dom对象,进而调用dom的成员

$("#apple")[0].style.backgroundColor = "blue";

$("li")[1].style.backgroundColor = "brown";

dom对象 ---> jquery对象

var dv = document.getElementById('apple');

$(dv).css('background-color','green');

二 jquery框架对象分析

jquery框架对象类型: jquery对象和 $ 对象

1. jquery对象就是各种选择器创建出来的对象

通过extend继承出来的

2. $对象就是函数对象

$函数对象可以调用的许多成员也是通过extend复制继承过来的

$.get() $.post() $.ajax()

以上无论是jquery对象还是$对象,他们90%以上的成员都是通过各自的extend复制继承过来的.

三遍历方法 each()方法

$.each(数组/对象,function(){处理代码}); //$对象调用的

$(选择器).each(function(){处理代码}); //jquery对象调用的

each方法实例

四加载事件

1.jquery加载事件实现

1. $(document).ready(function处理);

2.$().ready(function处理);

3.$(function处理);对第一种加载的封装而已

2.juqery加载事件与传统加载事件的区别

2.1 设置个数

在同一个请求里,jquery的可以设置多个,而传统方式只能设置一个.

传统方式加载事件是给onload事件属性赋值,多次赋值,后者会覆盖前者.

jquery方式加载事件是把每一个加载事件都存入一个数组里边,成为数组的元素,执行的时候就遍历该数组执行每个元素即可,因此其可以设置多个加载事件.

2.2 执行时机不一样

传统方式加载事件,是全部内容(文字,图片,样式)在浏览器显示完毕再给执行加载事件

juqery方式加载事件,只要全部内容(文字,托,样式)在内存里边对应的DOM树结构绘制完毕就给执行,有可能对应的内容在浏览器里边没有显示.

pc端代码

服务器端代码

五普通事件操作

$().事件类型(事件处理函数 fn); //设置事件

$().事件类型(); //触发执行事件

事件类型: click,keyup,keydown,mouseover,mouseout,blur,focus等等

使用示例

六 jquery对文档的操作

1. 节点追加

例

2. 节点替换

3.节点删除

$(父节点标签).empty() //父元素删除内部全部子元素

$(子标签).remove() //具体节点删除

4.复制节点

clone([false])默认只给复制对象节点

clone(true) 复制元素节点及身上的对应事件,设置为true以便复制元素的所有事件处理

七属性选择器

[attribute] 用法: $("div[id]"); 匹配包含给定属性的元素

[attribute=value]用法: $('input[name=newsletter]') 匹配给定的属性是某个特定值的元素

[attribute!=value]用法: $("input[name!+'newsletter']") 匹配给定的属性是不包含某个特定值的元素

[attribute^=value]用法:$("input[name^=news]")匹配给定的属性是以某些值开始的元素

[attribute$=value]用法: $("input[name$=letter]")匹配给定的属性是以某些值结尾的元素

[attribute*=value]用法: $("input[name*='man']") 匹配给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]用法 $("input[id][name=$='man']") 复合选择器,需要同时满足多个条件时使用

jQuery(2)