《web前端技术》课件-第十三章.pptVIP

mouseout:function(){$(h3).css(background-color, #FFFFFF);} //绑定鼠标移出事件 }); }); /script /head body h3事件绑定/h3 p我是P元素/p button按钮/button /body 【例13-2】 为元素绑定事件（以下提供部分代码）。 13.4 jQuery 的事件处理 【例13-2】 初始页面效果和触发不同事件后的页面效果如图所示。 为元素绑定事件 13.4 jQuery 的事件处理 2．移除绑定 $(selector).unbind(event,function) 【例13-2】 在例13-1中“$(button).bind(click,function(){$(p).slideToggle();});”代码后面添加以下代码，移除为按钮绑定的单击事件。 $(button).unbind(click); //移除为按钮绑定的单击事件 13.4 jQuery 的事件处理 3．绑定一次性事件处理 $(selector).one(event,data,function) 13.4 jQuery 的事件处理 13.2.1 基本选择器 13.2 jQuery 选择器 表 基本选择器 选择器 使用方法 说明 示例 ID 选择器 $(#id) 根据元素的 id 属性值获取一个元素，返回单个元素 $(#user)，获取 id 属性值为user 的元素 元素选择器 $(element) 根据元素的标签名获取相应的元素，返回元素集 $(div)，获取所有的 div 元素 类名选择器 $(.class) 根据元素拥有的类名获取元素，返回元素集 $(.test)，获取拥有 test 类名的 所有元素 13.2.1 基本选择器 13.2 jQuery 选择器 续表 基本选择器 选择器 使用方法 说明 示例 复合选择器 $(selector1, selector2, …, selectorN,) （selectorN 表示选择器，可以是 ID 选择器、元素选择器或类名选择器等） 将每个选择器获取到的元素合并，返回元素集 $(div, p.test)，获取所有的 div 元素和拥有 test 类名的 p 元素 通配符选择器 $(*) 获取网页上所有的元素，返回元素集 $(*)，获取所有的元素 13.2 jQuery 选择器 13.2.2 层级选择器 表 层级选择器 13.2.3 过滤选择器 13.2 jQuery 选择器 1．简单过滤器 13.2 jQuery 选择器 表 简单过滤器 13.2 jQuery 选择器 2．内容过滤器 表 内容过滤器 13.2 jQuery 选择器 3．可见性过滤器 表 可见性过滤器 13.2 jQuery 选择器 4．子元素过滤选择器 表 子元素过滤选择器 13.2 jQuery 选择器 5．表单对象的属性过滤器 表 表单对象的属性过滤器 13.2 jQuery 选择器 13.2.4 属性选择器 表 属性选择器 13.2 jQuery 选择器 13.2.5 表单选择器 表 表单选择器 jQuery 操作元素 13.3 13.3 jQuery 操作元素 13.3.1 操作元素的内容和值 表 操作元素内容和值的方法 13.3 jQuery 操作元素 13.3.2 操作 DOM 节点 1．创建节点 13.3 jQuery 操作元素 1．创建节点 script $(document).ready(function(){ //方法一 var $p1 = $(p/p); $p1.html(方法一添加的内容); $(body).append($p1); //方法二 var $p2 = $(p方法二添加的内容/p); $(body).append($p2); //方法三 $(body).append(p方法三添加的内容/p); }) /script 13.3 jQuery 操作元素 超链接 Gaoshoudianbo 高手点拨 13.3 jQuery 操作元素 2．插入节点 13.3 jQuery 操作元素 2．插入节点 表 插入节点的方法 表中，selector 表示被选元素；content 表示要插入的指定内容。 13.3 jQuery 操作元素 3．删除、复制和替换节点 表 删除、复制和替换节点的方法 13.3 jQuery 操作元素 13.3.3 操作元素属性