JQuery 实践--让页面动起来
- 获取和设置元素特性
特性属性:是指DOM元素中能够和HTML元素中某个特性对应得上的属性。通常JS特性属性的名称与对应的特性一一匹配,但class 《=》className
操作特性还是操作属性,取决于想做什么以及想如何去实现。
JQuery 没有用于获取或修改元素苏醒的具体命令。然而可以利用原生JS表示法,存取属性和属性值,首先获取元素引用。each(iterator) 遍历包装集里所有元素,为各个元素分别调用传递进来的迭代器函数 参数为一个函数,函数参数为被设置为保障局里当前元素的下标,当前元素为this. 返回包装集 读取指派到包装集里第一个元素指定特性的值 attr(name) 参数字符串,特性的名称 没有返回Undefined.
自定义特性也能取出为包装集里所有元素的name特性设置传递进来的值 attr(name,value) name:字符串
value: 字符串|对象|函数
函数时,参数为包装集里从0开始的下标,this为当前元素包装集 .attr('disabled','disabled') 一次性指定多个特性 attr(attributes) 一个对象,对象属性作为特性而复制到包装集里所有元素上
如果产地进来的对象的属性值是一个函数引用,则它的操作方法类似前面的attr格式,为
匹配集里各个元素分别调用函数包装集 删除特性 removeAttr(name) 字符串 包装集 JQuery存取常用属性的简便方法:class, cssFloat,flost,for,maxlength,readonly,styleFloat==>IE
- 操作元素类名称
修改元素样式:添加CSS类或操作DOM,直接应用新样式
添加指定的一个或多个类名称到包装集的所有元素 addClass(names) 一个字符串,多个类用空格分开 包装集 从包装集各元素里删除指定的一个或多个类名称 removeClass(names) 一个字符串,多个类名用空格分开 包装集 切换一组样式 toggleClass(name) 一个字符串,包含用于切换的类名称 包装集 设置指定的值到每个已匹配元素的指定的CSS样式属性 css(name,value) 字符串
字符串|数字|函数
函数,this包装集 一次指定多个CSS属性值 css(properties) 属性对象 包装集 获取包装集里第一个元素name所指定的CSS属性 值 css(name) 字符串 值 设置宽度 width(value) 以像素为单位的数值 包装集 设置高度 height(value) 以像素为单位的数值 包装集 读取宽度 width 读取高度 height 确定匹配集里是否有元素拥有已传递name参数所指定的类名 hasClass(name) 字符串 true/false wapper.is(classname)<==>wapper.hasClass(classname) - 设置元素内容 和 修改DOM树
获取匹配集里第一个元素的HTML内容 html() 返回值与那个元素的innerHTML属性所获得的内容一致 把传入的HTML片段设置为所有匹配元素的内容 html(text) 字符串,HTML片段 包装集 把包装集里元素的所有文本内容连接起来,并返回字符串 text() 连接而成的字符串 设置文本内容 text(content) 文本内容。 <==> < 包装集 把闯入的HTML片段或元素追加到所有已匹配元素的内容之后 append(conent) 字符串|元素|对象 包装集 如果包装集中只有一个元素,则被追加元素从原始位置删除。如果包装集中有多个元素,则被追加元素备份被用来追加。原位置还有 把包装集里所有元素移动到指定目标的内容的末尾 appendTo(target) 字符串|元素 包装集 如果目的地只标识一个目标元素,则元素被移动,如果目的地标识多个目标元素,则源元素留在原始位置,且被复制到每个目标元素 prepend(conent) 包装集 prependTo(target) 包装集 在目标元素之前插入元素,而不是目标元素的第一个子元素之前 before(content) 包装集 insertBefore(target) 包装集 after(content) 包装集 insertAfter(target) 包装集 $('<p>hi there</p>').insertAfter('p img') 把匹配集各个元素用已传递HTML标签或已传递的元素的克隆副本分别包裹起来 wrap(wrapper) 字符串|元素 包装集 $('a.suprise').wrap('<div class='hello'></div> 把匹配集的元素作为一个单元包裹起来 wrapAll(wrapper) 字符串|元素 包装集 把匹配集个元素的内容分别包裹起来 wrapInner(wrapper) 字符串|元素 包装集 从页面DOM里删除包装集里所有元素 remove() 包装集 从DOM里删除的元素仍然被该包装集引用着。不会被回收 清空匹配集里所有DOM元素的内容 empty() $('div.ekementToReplace').after('<p>xdfsd</p>').remove() 创建包装集里元素的副本,返回新包装集 clone(copyHandlers) true/false
复制事件处理程序新建的包装集 - 处理表单元素值
表单元素指的在表单中出现的,拥有name 和value特性的元素
返回匹配集中第一个元素的value特性 val() 已获取的值或值数组 如果包装集里第一个元素不是表单元素,抛出异常。
复选框,单选框,也是返回value特性
单选按钮:
$('[name=radioGroup]:checked').val()设置表单的值 val(value) 字符串 包装集 获取复选框组的值的数组
对包装集里的元素进行序列化
清空字段
把DOM表单转换为适用于AJax的格式
使复选框或单选按钮变为选中选择<select>元素内的选项
选中复选框,单选按钮,或select元素的选项变为已选中 val(values) 一个值数组 包装集 只要它们的值和已传递值的数组的任何一个值相匹配
JQuery 实践--让页面动起来的更多相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...
- jQuery实践树(2)
上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你 ...
- jquery实践
转:http://www.cnblogs.com/Wayou/p/jquery_best_prictise.html jQuery编程的最佳实践 好像是feedly订阅里看到的文章,读完后觉得非常 ...
- 玩转HTML5移动页面(动效篇)(转载)
本文转载自: 玩转HTML5移动页面(动效篇)
- jquery加载页面的方法
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&q ...
- jquery加载页面的方法(页面加载完成就执行)
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a&qu ...
- 一款jQuery实现重力弹动模拟效果特效,弹弹弹,弹走IE6
一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
随机推荐
- In-App Purchase(iap)快速指南
点击IOS IAP APP内支付 Java服务端代码直接跳转到示例点击直接跳转到示例 iap简介 在应用中内嵌Store,在iOS应用中使用Store Kit framework来实现In-A ...
- Python【BeautifulSoup解析和提取网页数据】
[解析数据] 使用浏览器上网,浏览器会把服务器返回来的HTML源代码翻译为我们能看懂的样子 在爬虫中,也要使用能读懂html的工具,才能提取到想要的数据 [提取数据]是指把我们需要的数据从众多数据中挑 ...
- pandas数据结构之DataFrame笔记
DataFrame输出的为表的形式,由于要把输出的表格贴上来比较麻烦,在此就不在贴出相关输出结果,代码在jupyter notebook可以顺利运行代码中有相关解释用来加深理解方便记忆 import ...
- Gossip协议
Gossip数据传播协议: Fabric通过将工作负载划分到事务执行(背书和提交)对等节点和事务排序节点,优化了区块链网络性能.安全性和可伸缩性.这种网络操作的解耦需要一个安全.可靠和可伸缩的数据传播 ...
- linux上启动tomcat报错:Failed to read schema document 'http://www.springframework.org/schema/data/mongo/spring-mongo-2.0.xsd
本文原文连接: http://blog.csdn.net/bluishglc/article/details/7596118 ,转载请注明出处! spring在加载xsd文件时总是先试图在本地查找xs ...
- SpringBoot 第二篇:SpringBoot配置文件使用
背景 项目跑起来,和以前相比,现在的配置文件能干什么?SpringBoot 项目的配置文件就是创建项目时,自带的 application.properties ,打开里面空空如也.这个文件里面的语法是 ...
- MySQL 字段类型介绍
MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...
- (十二)easyUI之表单和验证完成登录页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 写给Web开发人员看的Nginx介绍
译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识 ...
- 请问IOS中做一个手机网站的app壳复杂吗?
公司开发了一个平台,手机网站已经做出来了,想开发一个苹果应用app,但公司没人会IOS开发,为了减小成本,现在想直接做一个壳来加载手机网站,请问在ios中复杂吗?是否有相应的控件直接加载url就行? ...