一 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']") 复合选择器,需要同时满足多个条件时使用
网友评论