zoukankan      html  css  js  c++  java
  • JQuery入门

    一:JQuery能干什么

        jQuery是一个JavaScript函数库。我们知道,JS是运行在浏览器的脚本语言,可以实现页面的动态效果控制。但是原生的JS比较简单,实现复杂功能时所需的代码量也是可观的。由此,就诞生了一系列的JS函数库。其中,jQuery是比较流行的JS函数库,其中封装了大量功能复杂且好用的函数,我们直接调用即可。

        jQuery库的功能:

    • HTML元素选取
    • HTML元素操作
    • CSS操作
    • HTML事件函数
    • JavaScript特效和动画
    • HTML DOM遍历和修改
    • AJAX异步编程
    • 插件机制用来扩展功能(可以增加自定义的函数)

    二:JQuery的引入

        <head> <script src="jquery-1.10.2.min.js"></script> </head>

    三:JQuery基本语法

        基础语法: $(selector).action()
        注:与EL/JSTL不同,JQuery是通过 $() 选择对象的,然后通过  .函数名()  调用方法

    四:JQuery选择器:选取页面元素

        1:基本选择器
        jQuery 选择器可以通过元素的 id、类、类型、属性、属性值等选择HTML 元素。
        1)元素选择器:通过元素名选择:$("name")
        2)#id 选择器:页面中元素的 id 应该是唯一的,所以在页面中选取唯一的元素需要通过 #id 选择器:$("#id")
        3)类选择器:通过指定的 class 查找元素:$(".类名")
     
        2:层级选择器
        可以通过层级关系由大到小地细致选取。
        1)祖先后代选择器:前面大选择器,后面为前面选择器结果中更小的元素选择器:$("大元素 小元素")
        2)父子选择器:$("父元素 > 子元素")
        3)紧邻选择器:紧跟着第一个选择器后的第二个选择器元素:$("前 + 后")
        4)范围选择器: prev 元素后的所有 target元素:$("prev ~target")
     
        3:筛选器
        1)第一个:$('范围元素:first')
        2)非:$("范围元素:not(选择器)")
        3)偶数项:$("范围元素:even")
        4)奇数项:$("范围元素:odd")
        5)第i-1项(从0开始):$("范围元素:eq(i)")
        6)大于i-1项:$("范围元素:gt(i)")
        7)最后项:$('范围:last')
        8)小于i-1项:$("范围:lt(i)")
        9)文档的根:$(":root")
        
        4:内容选择器
        1)包含某内容的元素:$("范围元素:contains('内容')")
        2)查找空元素:$("范围:empty")
        3)包含某选择器内容的元素:$("范围:has(选择器)")
        4)查找含有子元素的元素:$("范围:parent")
     
        5:属性选择器
        1)查找包含某属性的元素:$("范围[属性]")
        2)查找属性为某值的元素:$("范围[属性='值']")
        还有:不等于某属性值、属性值以某内容开头、属性值以某内容结尾、多个属性条件组成的选择器等等。
     
        6:表单选择器
        表单选择器格式为:$(":表单标签名")
        主要有
    • :input
    • :text
    • :password
    • :radio
    • :checkbox
    • :submit
    • :image
    • :reset
    • :button
    • :file

        7:表单属性选择器

        常用的有两个:

        1)匹配所有选中的被选中元素(复选框、单选框等):$("input:checked")

        2)匹配所有选中的option元素:$("select option:selected")

    五:对象访问与操作

        1)为选择出的每一个匹配对象执行相应操作callback函数:$(选择器).each(callback)

        2)统计选择出的元素个数:$(选择器).size();

        3)获得选择出的第i-1个元素:$(选择器).get(i);

    六:插件机制扩展自定义函数

        1)为所有对象增加自定义函数:jQuery.fn.extend({函数定义}),使用:$(选择器).自定义函数名();

        2)为JQuery命名空间增加自定义函数:jQuery.extend({函数定义}),使用:jQuery.函数名();

    七:工具函数

        1)数组遍历与处理:$.each(array,callback)

        2)解析XML字符串为XMLdoc对象: $.parseXML(xml字符串)

        3)判断数字:$.isNumeric(value)

        4)测试对象是否是空对象(不包含任何属性):$.isEmptyObject(obj)

        5)去掉字符串起始和结尾的空格:$.trim(str)

    八:Ajax

        1:Ajax请求函数

        1)GET方式发送请求:$.get(url,{参数键值对},function(data){回调函数处理返回结果,data接收结果},[返回内容格式:xml, html, script, json, text, _default]);

        2)POST方式发送请求:$.post(url,{参数键值对},function(data){回调函数处理返回结果,data接收结果},[返回内容格式:xml, html, script, json, text, _default]);

        (JQuery中,GET、POST方式只不过是函数名不同而已,都不需要在url上拼接参数,统一了格式。当然,底层实现时GET方式还是拼接了的。)

        3)请求JSON文件:$.getJSON(url,[可选:参数键值对],function(json){把加载的JSON文件转化为对象给json形参,进行内容提取})

        4)请求JS文件:$.getScript(url,[callback])

        5)加载HTML文件:$.(选择器).load(url,[data],[callback])

        2:Ajax事件函数

        1)发送请求前:ajaxSend(callback)

        2)开始发送时:ajaxStart(callback)

        3)发送成功时:ajaxSuccess(callback)

        4)发送失败时:ajaxError(callback)

        5)请求结束时:ajaxStop(callback)

        6)请求完成:ajaxComplete(callback)

    九:事件处理

    ready(fn):浏览器载入DOM完成后执行fn回调函数;

    $(选择器).on(event,fn):为元素的event事件绑定回调函数fn;

    $(选择器).off(event):为元素移除event事件;

    hover([over],out):over:鼠标移到元素上要触发的函数,out:鼠标移出元素要触发的函数

    blur([[data],fn]):当元素失去焦点时触发 blur 事件。

    change([[data],fn]):当元素的值发生改变时,会发生 change 事件。

    click([[data],fn]):点击事件

    dblclick([[data],fn]):双击事件

    error([[data],fn]):当元素遇到错误(没有正确载入)时,发生 error 事件。

    focus([[data],fn]):当元素获得焦点时,触发 focus 事件。

    focusin([data],fn):focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。

    focusout([data],fn):focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

    keydown([[data],fn]):当键盘或按钮被按下时,发生 keydown 事件。

    keypress([[data],fn]):当键盘或按钮被按下时,发生 keypress 事件。

    keyup([[data],fn]):当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。

    mousedown([[data],fn])

    mouseenter([[data],fn])

    mouseleave([[data],fn])

    mousemove([[data],fn])

    mouseout([[data],fn])

    mouseover([[data],fn])

    mouseup([[data],fn])

    resize([[data],fn]):当调整浏览器窗口的大小时,发生 resize 事件。

    scroll([[data],fn]):当用户滚动指定的元素时,会发生 scroll 事件。

    select([[data],fn]):当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。

    submit([[data],fn]):当提交表单时,会发生 submit 事件

    unload([[data],fn]):在当用户离开页面时,会发生 unload 事件。

    十:页面内容、样式操作

        1:页面内容操作

        1)获得html代码:$(选择器).html();

        2)更改元素html代码:$("选择器").html("更改代码");

        3)获得文本:$(选择器).text();

        4)更改文本:$(选择器).text(新文本);

        5)获取文本框中的值:$(选取器).val();

        6)更改文本框中的值:$(选择器).val(文本值);

        2:更改元素位置

        1)offset([coordinates]):元素进行相对偏移。

        2)scrollTop([val]):元素相对滚动条顶部偏移。

        3)scrollLeft([val]):元素相对滚动条左侧偏移。

        3:更改元素尺寸

    • height([val|fn])
    • width([val|fn])
    • innerHeight()
    • innerWidth()
    • outerHeight([soptions])
    • outerWidth([options])

    十一:页面效果控制

    • 基本

      • show([s,[e],[fn]])
      • hide([s,[e],[fn]])
      • toggle([s],[e],[fn])
    • 滑动

      • slideDown([s],[e],[fn])
      • slideUp([s,[e],[fn]])
      • slideToggle([s],[e],[fn])
    • 淡入淡出

      • fadeIn([s],[e],[fn])
      • fadeOut([s],[e],[fn])
      • fadeTo([[s],o,[e],[fn]])
      • fadeToggle([s,[e],[fn]])
    • 自定义

      • animate(p,[s],[e],[fn])
      • stop([c],[j])
      • delay(d,[q])
      • finish([queue])
  • 相关阅读:
    (4)Maven快速入门_4在Spring+SpringMVC+MyBatis+Oracle+Maven框架整合运行在Tomcat8中
    (3)Maven快速入门_3在Eclipse中创建Maven项目打包成jar
    (2)Maven快速入门_2maven在Eclipse中的设置
    (1)Maven快速入门_1maven安装
    (11)Microsoft office Word 2013版本操作入门_word中表格操作
    (10)Microsoft office Word 2013版本操作入门_word表格
    洛谷 P2144 [FJOI2007]轮状病毒
    洛谷 P2234 [HNOI2002]营业额统计
    【模板】主席树
    洛谷 P2572 [SCOI2010]序列操作
  • 原文地址:https://www.cnblogs.com/huangdabing/p/9249224.html
Copyright © 2011-2022 走看看