zoukankan      html  css  js  c++  java
  • 使用JQuery快速高效制作网页交互特效

    第二章 JavaScript对象

    浏览器对象模型(BOM)是JavaScript的组成之一,window对象是整个BOM的核心

          window对象的常用方法

    prompt():显示可提示用户输入的对话框

    alert():显示一个带有提示信息和一个"确定"的按钮的警示对话框

    confirm():显示一个滴啊有提示信息,"确定"和"取消"按钮的对话框

    close():关闭浏览器窗口

    open():打开一个新的浏览器窗口,加载给定URL制定的文档

    setTimeout():在制定的毫秒数后调用函数或计算表达式

    setInterval():按照制定的周期(以毫秒计)来调用函数或表达式

          window对象的常用事件

    onload:一个页面或一幅图像完成加载

    onmouseover:鼠标指针移到某个元素之上

    onclic:鼠标单击某个对象

    onkeydown:某个键盘按键被按下

    onchange:域的内容被改变

        window对象的常用属性

    history:有关客户访问过的URL的信息

    location:有关当前URL的信息

        history对象的方法

    back():加载history对象列表中的前一个URL

    forward():加载histrory对象列表中的后一个URL

    go():加载history对象列表中的某个具体URL

        location对象的属性和方法

    host:设置或返回主机名和当前URL的端口号

    hostname:设置或返回当前URl的主机名

    href:设置或返回完整的URL

    reload():重写加载当前温度

    replace():用新的文档替换当前文档

              document对象的方法

    getElementById():返回对拥有指定id的第一个对象的引用

    getElementsByName():返回带有指定名称的对象的集合

    getElementsByTagName():返回带有指定标签名的对象的集合

    write():像文档写文本,HTML表达式或JavaScript代码

              定时函数的清除

    clearTimeout(setTimeout()返回的ID值)

    clearInterval(setInterval()返回的ID值)

              Date对象的方法

    getDate():返回Date对象的一个月中的每一天,其值为1~31

    getDay():返回Date对象的星期中的每一天,其值为0~6

    getHours():返回Date对象的小时数,其值为0~23

    getMinutes():返回Date对象的分钟数,其值为0~59

    getSeconds():返回Date对象的秒数,其值为0~59

    getMonth:返回Date对象的月份,其值为0~11

    getFullYear():返回Date对象的年份,其值为4位数

    getTime():返回自某一时刻(1970年1月1日)以来的毫秒数

            Math对象的方法

    ceil():对数进行上舍入

    floor():对数进行下舍入

    round():巴蜀四舍五入为最接近的数

    random():返回0-1的随机数  

                                           第三章 初识jQuery

    jQuery是一个优秀的JavaScript库, 使用它可以 大大提高Web客户端的开发效率.

    要想使用jQuery的功能,需要首先引用jQuery库文件。 可以使用addClass()方法和css()方法为DOM元素添加样式.

    $(document).ready()与window.onload使用场合类似,但有差异 jQuery中的click()方法对应JavaScript中的onclick事件

    jQuery代码中常见的元素包括工厂函数,选择器和方法。 jQuery程序代码的特色:包含$符号和连缀操作.

    每个页面都有对应DOM模型,DOM模型 包括元素节点,文本节点和属性节点。

    DOM对象转换成jQuery对象 var $tex=$(DOM对象)

    jQuery对象转换成DOM对象 var tex=$tex.get(0);或 var tex=$tex[0];

    使用next()方法可以获得所匹配元素集合中每个元素其后紧邻的 同辈元素。

                                     第四章 jQuery选择器

                  基本选择器

    标签选择器:根据给定的标签名匹配元素,返回元素集合,$("h2")选取所有h2元素

    ID选择器:根据给定的Id匹配元素,返回单个元素,$("#title"),选取id为title的元素

    类选择器:根据给定的class匹配元素,返回元素集合,$(".a")选取所有class为a的元素

    并集选择器:将每一个选择器匹配的元素合并后一起返回,元素集合,$("div,.a")选取所有div,类为a的元素

    交集选择器:匹配制定class或id的某元素或元素集合(若在同一页面中指定id的元素返回值,则一定是单个元素;若制定class的元素,则可以是单个元素,也可以是元素集合),返回单个元素或元素集合,$("h2.a")选取所有拥有class为title的h2元素

    全局选择器: 匹配所有元素,集合元素,$("*")选取所有元素

                  层次选择器

    后代选择器:返回元素集合,$("#a span")选取#a下所有<span>元素

    子选择器:返回元素集合,$("#a>span"),选取#a下子元素<span>

    相邻元素选择器:返回元素集合,$("h2+dl")选取紧邻<h2>元素之后的同辈元素<dl>

    同辈元素选择器:元素集合,$("h2~dl")选取<h2>元素之后所有的同辈元素<dl>

                  属性选择器

    选取包含给定属性的元素,返回元素集合,$("[href]")选取含有href属性的元素

    选取等于给定属性是某个特定值的元素,元素集合,$("[href="#"]"),选取href属性值为"#"的元素

    选取不等于给定属性是某个特定值的元素,返回元素集合,$("[href !="#"]"),选取href属性值不为"#"的元素

    选取给定属性是以某个些特定值开始的元素,元素集合,$("[href ^="en"]"),选取href属性值以en开头的元素

    选取给定属性是以某个些特定值结尾的元素,元素集合,$("[href $="en"]"),选取href属性值以en结尾的元素

    选取给定属性是包含某些值的元素,元素集合,$("[href *="en"]"),选取href属性值中含有txt的元素

    选取满足多个条件的复合属性的元素,元素集合,$("li[id][title='新闻要点]")选取含有id属性和title属性为”新闻要点“的<li>元素

                基本过滤选择器

    :first,选取第一个元素,单个元素,$("li:first")选取所有<li>第一个<li> 元素

    :last,选取最后一个元素,单个元素,$("li:last")选取所有<li>最后一个<li> 元素

    :not(selectot),选取去除所有与给定选择器匹配的元素,集合元素,$("li:not(.a)")选取class不是a的元素

    :even,选取索引是偶数的所有元素(index从0开始),集合元素,$("li:even")选取索引是偶数的所有<li>元素

    :odd,选取索引是奇数的所有元素(index从0开始),集合元素,$("li:odd")选取索引是奇数的所有<li>元素

    :eq(index),选取索引等于index的元素(index从0开始),单个元素,$("li:eq(1)")选取索引等于1<li>元素

    :gt(index),选取索引大于index的元素(index从0开始),集合元素,$("li:gt(1)")选取索引大于1<li>元素,不包括1

    :lt(index),选取索引小于index的元素(index从0开始),集合元素,$("li:lt(1)")选取索引小于1<li>元素,不包括1

    :header,选取所有标题元素,集合元素,$(":header")选取网页中的所有标题元素

    :focus,选取当前获取焦点的元素,集合元素,$(":focus")选取当前获取焦点的元素

                可见性过滤选择器

    :visible,选取所有可见的元素,集合元素,$(":visible")选取所有可见的元素

    :hidden,选取所有隐藏的元素,集合元素,$(":hidden")选取所有隐藏的元素

                      转义符

    <div id="id#a">aa</div>

    <div id="id[2]">cc</div>

    错误: $("id#a") $("#id[2]")

    正确:$("#id\#a") $("#id\[2\") 多一个空格或少一个空格,可能会得到不同的结果。

                                  第五章jQuery中的事件与动画

                jQuery中典型事件

    单击事件:click(fn),单击鼠标时发生,fn表示绑定的函数

    按下键盘触发事件:keydown(fn),按下键盘时发生,fn表示绑定的函数

    失去焦点事件:blur(fn),失去焦点时发生,fn表示绑定的函数

                常用的鼠标事件

    click():触发或将函数绑定到指定元素的click事件,单击鼠标时

    mouseover(): 触发或将函数绑定到指定元素的mouseover事件,鼠标指针移过时

    mouseout():触发或将函数绑定到指定元素的mouseoutshij,鼠标指针移出时

              常用键盘事件

    keydown():触发或将函数绑定到指定元素的keydown事件,按下按键时

    keyup():触发或将函数绑定到指定元素的keyup事件,释放按键时

    keypress():触发或将函数绑定到指定元素的keypress事件,产生可打印的字符时

              常用的表单事件

    focus():触发或两函数绑定到指定元素的focus事件,获得焦点

    blur();触发或将函数绑定到指定元素的blur事件,失去焦点

              绑定事件

    bind(type,[data],fn):data不是必需的

    type:事件类型,主要包括blur,focus,click,moseout等基础事件,还可以自定义事件

    [data]:可选参数,作为event.data属性值传递给事件对象的额外数据对象

    fn:处理函数,用来绑定的处理函数 使用bind()方法不仅可以一次绑定一个事件,还可以同时绑定多个事件。

              移除事件

    unbind([type],[fn])

    [type]:事件类型,主要包括blur,focus,click,moseout等基础事件,还可以自定义事件

    fn:处理函数,用来解除绑定的处理函数

              hover()方法

    hover(enter,leave); hover()方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时,会触发指定的第1个函数(enter);当鼠标指针移出这个元素时,会触发指定的第2个函数(leave)

              toggle()方法

    toggle(fn1,fn2,....,fnN);toggle()方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数 (fn1);当在此单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

              控制元素的显示与隐藏

    隐藏到显示:$(selector).show([speed],[callback]);

    显示到隐藏:$(selector).hide([speed],[callback]);

    speed:默认值为"0",变化的速度,毫秒1000,slow,normal,fast callback:可选。

    show函数执行完之后,要执行的函数   

              改变元素的透明度

    淡入:$(selector).fadeIn([speed],[callback]) 元素从隐藏到完全可见的过程。

    淡出:$(selector).fadeOut([speed],[callback]) 元素从可见到隐藏的过程。

    speed:默认值为"0",变化的速度,毫秒1000,slow,normal,fast callback:可选。

    show函数执行完之后,要执行的函数

              改变元素高度

    slideUp(“slow”):若元素的display属性值为block,这个元素会从下到上缩短直至隐藏。

    slideDown("slow"):若元素的display属性值为none,这个元素会从上向下延伸显示。

    slow,normal,fast(三者对应的世界分别为0.6秒,0.4秒,0.2秒)

                                        第六章使用jQuery操作DOM

                  样式操作

    css(name,value);//设置单个值

    css({name:value,name:value,name:value})//同时设置多个属性

    name:必需,规定CSS属性的名称,该参数可以是任何css属性。

    value:必需,规定CSS属性的值。

    name:value:必需,规定要设置样式的属性的"名称:值"对象。

                追加样式和移除样式

    追加:addClass(class)或addClass(class1 class2..classN)

    移除:removeClass(class)或removeClass(class1 class2...classN);

    切换样式:toggleClass(class);

                  内容操作

    html([content]) text([content])

    html():用于获取第一个匹配元素的HTML内容或文本内容

    html(content):用于设置所有匹配元素的HTML内容或文本内容

    text():用于获取所有匹配元素的文本内容

    text(content):用于设置所有匹配元素的文本内容

          属性值的操作:val([value])

    value:可选。规定被选元素的新内容。

    $(slector)或$(element)或$(html) selector:选择器。

    使用jQuery选择器匹配元素

    element:DOM元素.以DOM元素来创建jQuery对象

    html:HTML代码。使用HTML字符创建jQuery对象

            内部插入

    append(content):想所选择的元素内部插入内容,即$(A).append(B)表示将B追加到A中。这样插入元素的顺序是最后一个。

    appendTo(content):即$(A).appendTo(B).A追加到B中。也是最后一个。

    prepend(content):向每个选择的元素内部前置内容。$(A).prepend(B)表示将B追加到A中。这样插入元素的顺序是第一个。

    prepend(To(content):即$(A).prepend(To(B).A追加到B中。也是第一个。

            外部插入

    after(content):想所选择的元素内部插入内容,即$(A).append(B)表示将B追加到A之后。这样插入元素的顺序是最后一个。

    insetAfter(content):即$(A).appendTo(B).A追加到B之后。也是最后一个。

    before(content):向每个选择的元素内部前置内容。$(A).prepend(B)表示将B追加到A之前。这样插入元素的顺序是第一个。

    insertBefore(To(content):即$(A).prepend(To(B).A追加到B之前。也是第一个。

    $(selector).remove([expr]):删除整个节点,不保留事件。

    $(selector).empty();删除的节点中的内容。

    $(selector).removeAttr(name):删除属性

    替换节点:

    var $A=$(<li>死神</li>")

    $("ul li:eq(1)").replacewith($A); 或 $($A).replaceAll("ul li:eq(1)")

    复制节点: $("ul li:eq(1)").clone(true).appendTo("ul"); true:表示是否复制事件

          获取与设置元素属性

    $(selector).attr([name]); //获取属性值 attr([name])

    获取和设置单个属性值,如$($a).attr("alt");

    attr({[name1:value1],[name2:value2]...[nameN:valueN]}):设置多个属性值,如 $("img").attr({"50",height:"100"})

      $(selector).children([expr])

      var $body=$("body").children();

    使用children()方法可以获取<body>元素子元素的个数

    alert($body.length) each循环:

    $body.each(function(index,dom){ index:下标,dom临

    时变量,是dom对象 })

              遍历同辈元素

    next([expr]): 用于获取紧邻匹配元素之后的元素。同辈元素的下一个。

    prev([expr]):用于获取紧邻匹配元素之前的元素。同辈元素的前一个。

    siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素。

              遍历前辈元素

    parent([selector]) 参数可选。获取当前匹配元素集合中每个元素的父集元素

    parents([selector]) 参数可选。获取当匹配元素集合中每个元素的祖先元素。 可以指定祖先中的任何一个元素。

              CSS-DOM操作

    css():设置或返回匹配元素的样式属性

    height([value]):参数可选。设置或返回匹配元素的高度。如果没有规定长度单位,则使用默认的px作为单位。$("#box").heigh(180);

    width([value]): 参数可选。设置或返回匹配元素的宽度。如果没有规定长度单位,则使用默认的px作为单位。$("#box").width(180);

    offset([value]):返回以像素为单位的top和left坐标。此方法对可见元素有效。$("#box").offset();

    offsetParent():返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative,absolute或fixed的元素 $("#box").offsetParent();

    scrollLeft([position]) 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 $("#box").scrollLeft(20) scrollTop([position])参数可选。设置或返回匹配元素相对滚动条顶部的偏移 $("#box").scrollTop20)

                                        第七章 表单校验

    在JavaScript中提交方式是,在<form>标签中加属性:onsubmit="return chck()"

    在jQuery中$("表单标签").submit(function(){

    return chck(); })

                  表单验证常用的方法和事件

    onblur:失去焦点,当光标离开某个文本框时触发

    onfocus:获得焦点,当光标进入某个文本框时触发

    blur():从文域中移开焦点

    focus():从文本域设置焦点,即获得鼠标光标

    select();选取文本域中的内容,突出显示输入区域的内容,全选域中内容。

              

                定义正则表达式

    普通方式P:var reg=/表达式/附加参数

    构造函数: var re=new RegExp("表达式","附加参数")

    正则表达式对象实例.test(字符串)

    简单模式(具体):var reg1=/cat/

    复合模式(抽象):var reg=/^W+$/;

    var str="my cat";

    var result=reg.test(str);//true

                  RegExp对象

    exec() :检索字符中是正则表达式的匹配,返回找到的值,并确定位置

    test() :检索字符串中指定的值,返回true或false RegExp对象属性(附加参数)

    global RegExp对象是否有标志g (代表可以进行全局匹配)

    ignoreCase RegExp对象是否有标志i (代表不区分大小写的匹配)

    multiline RegExp对象是否有标志m (代表可以进行多行匹配)

              String对象的方法

    match():找到一个或多个正则表达式的匹配(匹配值)

    search():检索与正则表达式匹配的值(索引)

    replace():替换与正则表达式匹配的字符串

    split():把字符串分割为字符串数组

    例: var str="my cat"

    var reg=/cat/

    var result=str.match(reg);

    var strto=str.repleace(/cat/g,"dog") //全局替换,返回替换后的字符串

                正则表达式的重复字符

    {n} 匹配前一项n次 d{3}:ddd

    {n,} 匹配前一项n次,或者多次

    {n,m} 匹配前一项至少n次,但是不能超过m次

    * 匹配前一项0次或多次,等价于{0,}

    + 匹配前一项1次或多次,等价于{1,}

    ? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}

                 正则表达式的常用符号

    /..../ 代表一个模式的开始和结束

    ^ 匹配字符串的开始 $ 匹配字符串的结束

    s 任何空白字符(换行,空格)

    S 任何非空白字符(不包含空格)

    d 匹配一个数字字符,等价于[0-9]

    D 除了数字之外的任何字符,等价于[^0-9] 除了0-9以外

    w 匹配一个数字,下划线或字母字符,等价于[A-Za-z0-9]

    W 任何非单子字符,等价于[^a-zA-z0-9_]

    . 除了换行符之外的任意字符

              表单选择器

    :input 匹配所有input,textarea,select和buttjon元素 $("#myform :input")选取表单中所有的input,select和button元素

    :text 匹配所有单行文本框 $("#myform :text") 选取type="text"的所有元素

    :password 匹配所有的密码框 $("#myform :password") 选取type="password"的元素

    :radio 匹配所有单项按钮 $("#myform :radio") 选取type="radio"的元素

    :checkbox 匹配所有复选框 $("#myform :checkbox") 选取type="checkbox "的元素

    :submit 匹配所有复选框 $("#myform :submit ") 选取type="submit"的元素

    :image 匹配所有图像域 $("#myform :image ") 选取type="image"的元素

    :reset 匹配所有重置按钮 $("#myform :reset") 选取type="reset"的元素

    :button 匹配所有按钮 $("#myform :button") 选取type="button"的元素

    :file 匹配所有文件域 $("#myform :file") 选取type="file"的元素

    :hidden 匹配所有不可见元素,或者type为hidden的元素 $("#myform :hidden ") 选取type="hidden "的元素

                表单选择器表单属性过滤器

    :enabled 匹配所有可用元素 $("#userform :enabled")匹配form内部除了编号输入框外的所有元素

    :disabled 匹配所有不可用元素 例如禁止输入的文本框

    :checked 匹配所有被选中元素(复选框,单项按钮,select中的option)

    :selected 匹配所有选中的option 元素

    我是不会选择做一个普通人的,如果我能够做到的话,我有权成为一位不寻常的人,我寻找机会,但我不寻求安稳,我不希望在国家的照顾下,成为一名有保障的国民,那将被人瞧不起,而使我感到痛苦不堪,我要做有意义的冒险,我要梦想,我要创造,我要失败,我也要成功,我的天性是挺胸直立,骄傲而无所畏惧,我勇敢的面对这个世界,自豪的说:在上帝的帮助下,我已经做到了。
  • 相关阅读:
    真正的e时代
    在线手册
    UVA 10616 Divisible Group Sums
    UVA 10721 Bar Codes
    UVA 10205 Stack 'em Up
    UVA 10247 Complete Tree Labeling
    UVA 10081 Tight Words
    UVA 11125 Arrange Some Marbles
    UVA 10128 Queue
    UVA 10912 Simple Minded Hashing
  • 原文地址:https://www.cnblogs.com/Smina/p/6792979.html
Copyright © 2011-2022 走看看