jQuery笔记3

$符号的由来
$(‘div’)  $(‘.apple’)  $(‘*’) $(’#id属性值‘)等等。
选择器使用的过程就是函数调用过程。
$符号就是一个函数,函数名称为”$”符号而已。
(javascript里边$符号是变量名字的组成部分)
也可以使用“jQuery”符号。

$符号本质就是一个函数

jquery对象 与 dom对象关系
jquery对象: $(‘#one’)   $(‘li’)  
等选择器使用返回的信息就是对象,称为“jquery对象”
dom对象:     document.getElementById()  
               document.getElementsByTagName()
等返回的信息就是“dom对象”
1.互调对方的成员
jquery有对javascript代码进行封装:
$(#id选择器)---------封装------> document.getElementById(id属性值)
$(tag标签选择器)-----封装----> document.getElementsByTagName(tag标签)

jquery对象  和 dom对象  直接去调用对方成员都失败了:

2.jquery对象封装dom对象
jquery对象如何封装的dom对象,它们的内部关系如何?
dom对象 就是jquery对象 的数组组成部分。

$(#id属性值)选择器对dom对象的封装:

$(tag标签选择器)对dom对象的封装:

jquery对象 和 dom对象 的转化
jquery对象--》dom对象
$()[下标]
jquery对象 变成  dom对象 进而调用dom对象成员:

dom对象--》jquery对象
$(dom对象选择器)
dom对象  变成  jquery对象  进而可以调用jquery对象的成员

jQuery框架对象分析
jQuery框架对象类型:jquery对象  和  $对象
① jquery对象(普通对象):就是各种选择器创建出来的对象 $(div)$(.class) $(#id)
② $对象就是”函数对象”  $.get()
1.jquery对象
通过各种选择器创建出来的jquery对象可以调用许多方法
html()text()attr()css()addClass()removeClass()等等
这些方法都是从哪来的?
答:是通过fn.extend拷贝继承过来的。

init原型继承fn,使得init实例化的对象不仅可以调用init成员,可以调用fn的成员

fn本身有extend拷贝继承,可以给自己丰富许多成员出来

jquery对象可以调用的成员分为三部分:

jquery使用过程中,90%以上的方法都来之extend拷贝继承过来的。

2.$对象
$对象使用例如: $.get(url请求地址) ajax请求
$本身就是函数,函数也是对象

该$函数对象 是通过extend拷贝继承给本身丰富的许多成员。

extend拷贝继承效果:

遍历方法
each()遍历方法:
$.each(数组/对象,function处理);  //$对象      调用的
$(选择器).each(function处理);   //jquery对象  调用的

总结:
1.$符号由来
$符号就是函数名字,除此还可以使用jQuery
2.jquery对象和dom对象关系
dom对象  是  jquery对象  的数组组成部分。

jquery对象---->dom对象:  $()[下标]
dom对象---->jquery对象:  $(dom对象)
3.jQuery框架对象分析
1)jquery对象:各种选择器制作的对象$(tag标签)  $(#id)  $(.class)

jquery对象可调用成员有三部分组成:
① init构造函数内部成员
② fn的成员
③ fn通过extend拷贝继承的,90%以上成员来源

2)$对象,其成员也是extend拷贝继承的
4.each()遍历方法

加载事件
javascript的加载事件:
    <body  onload = “函数()”>
    window.onload = function(){}
加载事件作用:使得html和css代码先执行,最后执行javascript代码。
(javascript执行的时候需要html代码的支持,所以html代码先执行)
1. jquery加载事件实现
① $(document).ready(function处理);
$(document)是把document的dom对象变为jquery对象

② $().ready(function处理);
$()也是创建jquery对象,不过内部没有dom对象的组成部分

③ $(function处理);  
该加载事件是对第①种加载事件的封装,运行决定速度稍慢(没有第①种快)
对第一种加载的封装而已


$(function)是对$(document).ready()的封装:

三种加载事件的具体使用:

jquery加载事件与传统加载事件的区别
1 设置个数
在同一个请求里边,jquery加载事件的可以设置多个,而传统方式只能设置一个

传统方式加载事件是给onload事件属性赋值,多次赋值,后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边并成为数组的元素,执行的时候就遍历该数组执行每个元素即可,因此其可以设置多个加载事件。

传统加载事件同时设置多个,后者覆盖前者:

执行时机不一样
传统方式加载事件,是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
    广告图片小叉隐藏图片显示(在加载事件里边给图片的小叉设置onclick事件)
    
    用户名输入框有点击隐藏灰色的文字功能(在加载事件里边给输入框设置onfocus事件,隐藏灰色文字,该onfocus事件是在页面加载事件里边设置的)
如果页面打开后,全部内容还没有加载完毕就点击输入框,输入用户信息,则用户名和“请输入用户名”灰色文件会混到一起。


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

 

传统加载事件执行效果:

jquery加载事件执行效果:

服务器端利用php绘制一个图片:

jquery加载事件原理
jquery加载事件是对DOMContentLoaded的事件的封装(非onload)

八.普通(简单)事件操作
① dom1级事件设置
    <input  type=”text”  οnclick=”过程性代码” value=’tom’ />
    <input  type=”text”  οnclick=”函数()” />
    itnode.onclick = function(){}
    itnode.onclick = 函数;
② dom2级事件设置
    itnode.addEventListener(类型,处理,事件流);
    itnode.removeEventListener(类型,处理,事件流);
    node.attachEvent();
    node.detachEvent();

jquery事件设置(无需考虑浏览器兼容问题)
    $().事件类型(事件处理函数fn);       //设置事件
    $().事件类型();                       //触发事件执行

事件类型:click、keyup、keydown、mouseover、mouseout、blur、focus等等    
例如:
$(form).submit()可以使得表单进行提交。        //触发事件
$(‘div’).click(function(){事件触发过程});    //设置事件

jquery简单事件设置:

有的时候,事件的触发执行不一定需要直接触发,有的时候是间接执行的:
(如下通过点击按钮,间接触发div的mouseover事件执行)

jquery对文档的操作
通过jquery方式实现页面各种节点的追加、删除、复制、替换等操作
1.节点追加
1.1 父子关系追加

2 兄弟关系追加

2.节点替换
$().replaceWith();  被动替换
$().replaceAll();    主动替换

3.节点删除
$(父节点).empty();         //父节点清空子节点
$(匹配节点).remove();      //删除指定的节点

4.复制节点
$().clone(true)    //节点 和 其身上的事件都给复制
$().clone(false)   //只给复制 节点 本身(包括节点内部信息)

文档操作案例(节点增加和删除)

利用文档操作,实现表单域的增加和删除:

十.属性选择器使用
$([name])  节点必须有name名称的属性存在
$([value])
<input  type=”text”  name=”username”>
<input  type=”text”  value=”linken”>
$([name=value])  必须有name名称属性,并且属性值严格等于value
$([name^=value])  必须有name名称属性,并且属性值以value开始
$([name$=value]) 必须有name名称属性,并且属性值以value结束
$([name*=value]) 必须有name名称属性,并且属性值必须出现value信息
$([name!=value])
① 如果有name名称属性,则属性值不能等于value
② 节点没有name名称属性

总结:

1.$符号由来
$符号就是函数名字,还可以使用”jQuery”符号
2.jquery对象 和 dom对象 关系
dom对象是jquery对象数组部分
jquery对象------>dom对象:  $()[下标]
dom对象------>jquery对象:  $(dom对象)
3.“jquery对象”分析
$(#id)  $(tag标签)  $(.class)等选择器使用后生成的对象就是jquery对象

jquery对象 都可以调用成员:
① jQuery.fn.init的成员
② jQuery.fn的成员
③ jQuery.fn.extend拷贝继承的成员 90%以上成员来源
4.each遍历方法
$.each(数组,function(){})
$.each(对象,function(){})
$(选择器).each(function(){});
5.加载事件
jquery加载事件3种形式:
$(document).ready(function(){});
$().ready(function(){});
$(function(){});

jquery加载事件 与 传统加载事件区别:
① 设置个数
② 执行时机

jquery加载事件原理,是对DOMContentLoaded事件的封装。
6.简单事件设置
$().事件类型(function(){})   设置事件
$().事件类型()             触发事件执行
7.文档操作
a)追加
父子:append()  prepend()   appendTo()  prependTo()
兄弟:after()    before()    insertAfter()  insertBefore()
b)替换
replaceWith()  被动  
replaceAll()    主动
c)删除
父节点.empty()    //清空子节点
$(选择器).remove()    //删除选择器匹配到的节点
d)复制
clone(true)     //复制 节点 和 事件
clone(false)     //复制 节点

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值