• 使用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 元素

    我是不会选择做一个普通人的,如果我能够做到的话,我有权成为一位不寻常的人,我寻找机会,但我不寻求安稳,我不希望在国家的照顾下,成为一名有保障的国民,那将被人瞧不起,而使我感到痛苦不堪,我要做有意义的冒险,我要梦想,我要创造,我要失败,我也要成功,我的天性是挺胸直立,骄傲而无所畏惧,我勇敢的面对这个世界,自豪的说:在上帝的帮助下,我已经做到了。
  • 相关阅读:
    获取全部校园新闻
    爬取校园新闻首页的新闻
    网络爬虫基础练习
    团队总结
    团队第二阶段冲刺绩效评估
    第二阶段冲刺第七天站立会议
    第二阶段冲刺第六天站立会议
    第二阶段冲刺第五天站立会议
    内测版本
    第二阶段冲刺第四天站立会议
  • 原文地址:https://www.cnblogs.com/Smina/p/6792979.html
Copyright © 2020-2023  润新知