JQuery 实践--让页面动起来

  1. 获取和设置元素特性
    特性属性:是指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

  2. 操作元素类名称
    修改元素样式:添加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)
             
  3. 设置元素内容 和 修改DOM树
  4. 获取匹配集里第一个元素的HTML内容   html() 返回值与那个元素的innerHTML属性所获得的内容一致
    把传入的HTML片段设置为所有匹配元素的内容   html(text) 字符串,HTML片段 包装集
    把包装集里元素的所有文本内容连接起来,并返回字符串 text() 连接而成的字符串
    设置文本内容 text(content) 文本内容。 <==> &lt 包装集
    把闯入的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
    复制事件处理程序
    新建的包装集
  5. 处理表单元素值

    表单元素指的在表单中出现的,拥有name 和value特性的元素

    返回匹配集中第一个元素的value特性 val()   已获取的值或值数组 如果包装集里第一个元素不是表单元素,抛出异常。
    复选框,单选框,也是返回value特性
    单选按钮:
    $(‘[name=radioGroup]:checked‘).val()
    设置表单的值 val(value) 字符串 包装集
    获取复选框组的值的数组
    对包装集里的元素进行序列化
    清空字段
    把DOM表单转换为适用于AJax的格式
    使复选框或单选按钮变为选中

    选择<select>元素内的选项

    选中复选框,单选按钮,或select元素的选项变为已选中 val(values) 一个值数组 包装集 只要它们的值和已传递值的数组的任何一个值相匹配
时间: 2024-08-28 11:17:25

JQuery 实践--让页面动起来的相关文章

从零开始学习jQuery (七) jQuery动画-让页面动起来!

原文:从零开始学习jQuery (七) jQuery动画-让页面动起来! 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

jQuery实践树(2)

上一个实践主要对jquery的ready事件进行.本实践要来使用jQuery改变页面的背景图片.可以先试试效果:http://hovertree.com/texiao/jquerytree/2/ 当你打开页面时,会看到一闪一闪的雪花效果.这不是使用jQuery的效果,只是用CSS设置了背景图片为动态图而已.本实践将要用jquery改变页面的背景图. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equ

jquey学习2之jquery动态添加页面片段

第一个方法:append()方法 [1]$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示. 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript&quo

jquery 平滑滚动页面到某个锚点

1 $(document).ready(function() { 2         $("a.topLink").click(function() { 3                 $("html, body").animate({ 4                         scrollTop: $($(this).attr("href")).offset().top + "px" 5            

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行) jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document).ready(function(){  $("#a").click(function(){  //a

使用jquery刷新当前页面

如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象(用于单开窗口) top.location.reload()刷新最顶端对象(用于多开窗口) 下面再介绍一些javascript基本函数 1.document.write("");为 输出语句 2.js中的注释为//

JQuery Mobile的页面

1.JQuery Mobile的页面结构如下图: page:是在浏览器中显示的页面 header:创建页面上方的工具栏(常用于标题和搜索按钮) content:定义了页面的内容,比如文本, 图片,表单,按钮等 footer:用于创建页面底部工具条 2.页面的加载 JQM的默认链接请求方式是ajax,为了不重新渲染整个页面和减少传输数据量,只是部门加载页面,也就是指加载另外一个页面上面提到的page中的内容. 下面是两个html页面,启动的是第一个页面 这时浏览器显示的内如如下,第二个page被隐

jQuery打印Html页面自动分页

最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: Javascript代码   $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 Css代码   <div style="page-break-after: always;"></div> 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintA

转:玩转HTML5移动页面(动效篇)

作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇和优化篇. ====前方高能==== (1)  CSS3时序错开渐显动画 这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后