播客php第39期jquery一昨天内容回顾

1、一昨天内容顾1. 各种选择器a)b)c)基本选择器层次选择器并且选择器$(#id)$(.class)$(tag)$(*)$(s1,s2,s3)$(s1s2)$(s1 s2)$(s1 + s2)$(s1 s2):last:eq(索引值):even:odd$(s1s2s3s4.):gt(索引值):lt(索引值)d)内容过滤选择器:contains(text):empty:has(选择器):parente)表单域选中选择器复选框、单选按钮:checked下拉列表2. 属性操作$().attr(name):selected$().attr(name,value)$().removeAttr(name)

2、$().attr(json 对象)$().attr(name，function)3. 快捷操作a)class 属性值$().addClass()$().removeClass()$().toggleClass()包含内容$().html(内容)$().text(内容) css 样式操作b)c)$().c$().came)行内、ame,value)、外部样式都可以获取$().css(json 对象)val()操作 value 属性值$().val(内容)$(复选框/下拉列表/单选按钮).val(元素，元素，元素)d)设置选中情况$(下拉列表/单选按钮).val();4. 复选框选中$().att

3、r(checked,true/false);$().attr(checked);获取选中项目的 value 值回二.作业1. 利用一个 控制器复选框控制器其他复选框的选中、不选中状态2. 利用并且选择器(:odd:even)实现下图效果：3. 制作两个按钮，实现的放大、缩小效果(width()、height()：获得原宽度、原高度给原宽度、原高度 增加一定的幅度(形成把新宽度、高度设置给新宽度、新高度)三. $符号的由来$(div) $(.apple) $(*) $(#id 属性值)等等。选择器使用的过程就是函数调用过程。$符号就是一个函数，函数名称为”$”符号而已。也可以使用“jQuery”

4、符号。在 jquery 框架外部使用的$符号本质是一个“函数”，除此之外还可以使用 jQuery它们都是同一个函数的不同名字。并且是通过window的“全局变量”四. jquery 对象 与 dom 对象关系jquery 对象： $(#one)$(li)等选择器使用返回的信息就是对象，称为“jquery 对象”dom 对象：.ge.geementById()ementsByTagName()等返回的信息就是“dom 对象”1.对方的成员jquery 对象 和 dom 对象对方成员(以失败告终)：2. jquery 对象封装 dom 对象jquery 对象如何封装的 dom 对象，它们的关系如何

5、？dom 对象 就是 jquery 对象 的数组组成部分。$(#id 属性值) 封装 dom 对象原理：$(tag)封装 dom 对象原理：3. jquery 对象 和 dom 对象的转化3.1 jquery 对象-dom 对象$()下标“jquery 对象”变为“dom 对象”就可以调用其成员：3.2 dom 对象-jquery 对象$(dom 对象)“dom 对象”变为“jquery 对象”就可以调用 jquery 对象的成员：五. jQuery 框架对象分析jQuery 框架对象类型：jquery 对象 和 $对象 jquery 对象(普通对象)：就是各种选择器创建出来的对象 $(div

6、)$(.class) $对象就是”函数对象” $.get()$(#id)1. jquery 对象$(#one)-$函数new jQuery.fn.init()$(#one).css()/attr()/addClass()/html()/text()等等，jquery 对象可以调用许多成员方法jquery 对象可以调用的成员一共有三种： init 本身成员 fn 的成员 fn.extend继承过来的(常用成员站到 90%以上)2. $对象$对象使用例如： $.get(url 请求地址) ajax 请求$本身就是函数，函数也是对象在 javascript 里边可以给函数成员(称为”静态成员”)六.

7、 遍历方法each()遍历方法：$.each(数组/对象,function 处理); /$对象调用的$(选择器).each(function 处理);/jquery 对象 调用的jquery 对象的遍历：总结：$符号的由来，其就是函数，除此还可以使用 jQueryjquery 对象 和 dom 对象 的关系dom 对象 是 jquery 对象 的数组组成部分 jquery 对象=dom 对象： $()下标 dom 对象=jquery 对象：$(dom 对象)jQuery 框架对象的分析两种对象：jquery 对象 和 $函数对象jquery 对象可调用的成员来之：init 构造函数 fn 的成

8、员 fn.extend继承的$函数对象的成员也都来 extend4. each()遍历方法$.each(数组/对象,function();$().each(function();继承七. 加载事件javascript 的加载事件： window.onload = function()加载事件作用：使得 html 和 css 代码先执行，最后执行 javascript 代码。1. jquery 加载事件实现$($().ready(function 处理);)是把的 dom 对象变为 jquery 对象$().ready(function 处理);$()也是创建 jquery 对象，不过没有 do

9、m 对象的组成部分$(function 处理); 对第一种加载的封装而已第三种函数选择器$(function)加载事件本质就是对第一种加载事件的封装：三种加载事件体现：2. jquery 加载事件与传统加载事件的区别2.1 设置个数在同一个请求里边，jquery 加载事件的可以设置多个，而传统方式只能设置一个传统方式加载事件是给 onload 事件属性赋值，多次赋值，后者会覆盖前者。jquery 方式加载事件是把每个加载事件都存入一个数组里边并成为数组的元素，执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。jquery 加载事件在同一个请求里边可以出现多个：传统加载事件在同

10、一个请求里边只能设置一个：2.2 执行时机不一样传统方式加载事件，是全部内容(文字、样式)在浏览器显示完毕再给执行加载事件。小叉隐藏显示（在加载事件里边给的小叉设置 onclick 事件）用户名输入框有点击隐藏灰色的文字(在加载事件里边给输入框设置 onclick 事件，隐藏灰色文字)jquery 方式加载事件，只要全部内容(文字、样式)在内存里边对应的 DOM 树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。jquery 加载事件执行时机：3. jquery 加载事件原理jquery 加载事件是对 DOMContentLoaded 的封装(非 onload)八. 普通(简单)

11、事件操作dom1 级事件设置input type=”text” onclick=”过程性代码” value=tom itnode.onclick = function() itnode.onclick = 函数;dom2 级事件设置itnode.addEventListener(类型，处理，事件流); itnode.removeEventListener(类型，处理，事件流); node.attachEvent();node.detachEvent();jquery 事件设置(无需考虑浏览器兼容问题)/$().事件类型(事件处理函数 fn);$().事件类型();/事件事件执行/事件类型：cl

12、ick、keyup、keydown、mouseover、mouseout、blur、focus 等等例如：$(form).submit()可以使得表单进行提交。/触发事件$(div).click(function()事件触发过程); /设置事件设置触发具体可以操作的各种事件：jquery 简单事件的设置(可以为同一个对象设置多个同类型事件)：间接触发指定对象的事件执行：九. jquery 对文档的操作通过 jquery 方式实现页面各种节点的追加、删除、替换等操作1. 节点追加1.1 父子关系追加1.2 兄弟关系追加2. 节点替换$().replaceWith();$().replaceAll

13、();替换主动替换3. 节点删除$(父节点).empty();$(匹配节点).remove();/父节点清空子节点/删除指定的节点4.节点$().clone(true)$().clone(false)/节点/只给和其身上的事件都给节点 本身(包括节点信息)dom 的节点操作：cloneNode(true/false)true:(本身节点和节点)false: 浅层(本身节点)1235. 文档操作案例(节点增加和删除)：十. 属性选择器使用$(name)节点必须有”name 名称”属性存在name 属性值等于 value name 属性值以 value 开始 name 属性值以 value 结尾n

14、ame 属性值必须包括 value 字样(位置不要求)name 属性值不等于 value(没有 name 属性也可以)$(name=value)$(name=value)$(name$=value)$(name*=value)$(name!=value)$()多个属性选择器“并且”关系总结：1. 加载事件使用三种形式：$().ready(function);$().ready(function);$(function);加载事件区别(jquery 与传统)： 设置个数 执行时机jquery 加载事件原理，其是对 DOMContentLoaded 的封装.2. 简单事件设置$().事件类型(function);设置事件$().事件类型();3. 文档操作触发事件a)节点追加父子：append()prepend()appendTo()prependTo()兄弟：aft