zoukankan      html  css  js  c++  java
  • JQ手册内容-详解

    一、 基本概念

    1. jQuery简介

    jQuery是一个基于JavaScript的框架。它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果。迄今为止,已经有大量的jquery插件和基于jQuery的UI框架(miniui、easyui、ligerui)。

    jQuery的宗旨是:write less,do more!

    2. 文档加载完毕函数

    常规形式:$(document).ready(function(){… …});

    简写形式:$(function(){… …});

    3. jquery对象和js对象的相互转化

    jquery对象不等同于js对象!

    js对象的属性和方法,jquery对象不能调用;jquery对象的属性和方法,js对象也不能调用。

    js转jquery:$(js对象)

    jquery转js:$(“#box1”).get(0)  或者    $(“.box”)[0]

    二、 选择器

    jquery的基石就是选择,jquery提供了大量的选择器。建议在不同的业务场景下使用不同的选择器。

    注意:通过任何一个选择器筛选到的结果都是一个数组,所以要判断通过选择器是否筛选到了元素,可以通过length属性进行判断。

    1. 基本选择器

    n ID选择器

    $(“#ID值”)    例如:$(“#txt1”)

    n 类选择器

    $(“.class名称”)   例如:$(“.box”)

    n 标记选择器

    $(“tagName”)   例如:$(“div”)

    n 组合选择器

    $(“selector1,selector2,selector3”)   例如:$(“.box,#txt1,div”)

    n 通配符选择器

    $(“*”)

    2. 层次选择器

    n 父子选择器

    $(“selector1 > selector2”)

    n 祖先后代选择器

    $(“selector1   selector2”)

    n 后兄弟选择器

    $(“selector1~siblings”)

    n 相邻的后兄弟选择器

    $(“selector1 + selector2”)

    3. 基本过滤选择器

    n :first :筛选第一个元素

    n :last :筛选最后一个元素

    n :odd :筛选索引值为奇数的元素

    n :even :筛选索引值为偶数的元素

    n :eq(n) :筛选索引值等于n的元素

    n :gt(n) :筛选索引值大于n的元素

    n :lt(n) :筛选索引值小于n的元素

    n :not(selector) :筛选排除selector以外的元素

    4. 内容过滤选择器

    n :contains(text) :筛选文本内容包含text的元素

    n :empty :筛选不包含任何子元素和文本内容的元素

    n :parent :筛选包含子孙元素或文本内容的元素

    5. 可见性过滤选择器

    n :visible :筛选可见元素

    n :hidden :筛选不可见元素

    6. 属性过滤选择器

    n [attr] :筛选存在attr属性的元素

    n [attr=value] :筛选attr属性值等于value的元素

    n [attr!=value] :筛选attr属性值不等于value的元素

    n [attr^=value] :筛选attr属性值以value开头的元素

    n [attr$=value] :筛选attr属性值以value结尾的元素

    n [attr*=value] :筛选attr属性值包含value的元素

    7. 表单属性选择器

    n :checked :筛选选中状态的单选按钮和复选框

    n :selected :筛选选中的下拉列表项

    n :enabled :筛选可用的表单元素

    n :disabled :筛选不可用的表单元素

    8. 表单对象选择器

    n :text :筛选单行文本框

    n :button :筛选按钮元素

    n :submit :筛选提交按钮

    n :password :筛选密码框

    n :radio :筛选单选按钮

    n :checkbox :筛选复选框

    n :file :筛选文件域

    n :image :筛选图片

    三、 筛选函数

    n parent() :获取父元素

    n children() :获取子元素

    n next() :获取相邻的后兄弟元素

    n nextAll() :获取所有的后兄弟元素

    n prev() :获取相邻的前兄弟元素

    n prevAll() :获取所有的前兄弟元素

    n find() :从子孙后代元素中查找满足条件的子孙元素(过滤后的是这组元素的子孙元素)

    n filter() :从一组元素中筛选满足条件的元素(过滤后的是这一组元素中的部分元素)

    n first() :获取第一个元素

    n last() :获取最后一个元素

    n siblings() :获取所有的同辈元素

    n not() :排除指定的元素

    n index() :获取一个元素在一组元素中的索引值

    n eq(n) :获取索引值等于n的元素

    四、 样式操作

    n css(“css属性”) :获取css属性的值

    n css(“css属性”, “值”) :给css属性赋值

    n css({“css属性1”:“值”,  “css属性2”:”值”}) :通过给多个css属性赋值

    n addClass :添加class样式

    n removeClass :移除class样式

    n toggleClass :切换class样式

    n hasClass :判断是否拥有class样式,有返回true,否则返回false

    五、 属性操作

    n attr(“属性名”) :获取属性的值

    n attr(“属性名”, “值”) :给属性赋值

    六、 DOM操作

    n append() :追加子元素(最后一个子元素)

    n prepend() :添加子元素(第一个子元素)

    n remove() :移除元素

    n empty() :清除所有的子孙元素

    n after() :添加一个后兄弟元素

    n before :添加一个前兄弟元素

    七、 事件

    1. 事件的类型

    load、click、dblclick、focus、blur、change、mouseover、mouseout、mousemove、mouseenter、mouseleave、keyup、keydown、keypress、scroll、resize

    2. 事件函数

    n bind :为事件绑定函数

    $(“#button1”).bind(“click”, function(){… …})

    n unbind :解除绑定的事件

    $(“#button1”).unbind(“click”);

    n click(function(){}) :为事件绑定函数的另一种写法

    $(“#button1”).click(function(){… …});

    n click() :触发或模拟单击事件

    3. 事件参数

    $(“#button1”).click(function(event){

    event.target:获取触发当前事件的元素

    event.source:

    event.which:获取对应的键盘按键值和鼠标按键值

    event. preventDefault():阻止浏览器默认行为

    event. stopPropagation():阻止事件冒泡

    });

    八、 动画

    n show([slow|normal|fast]|毫秒数):让元素显示

    n hide([slow|normal|fast]|毫秒数):隐藏元素

    n toggle([slow|normal|fast]|毫秒数):切换元素的显隐状态

    n slideUp():让元素隐藏(高度逐渐变为0)

    n slideDown():让元素显示(高度从0逐渐恢复到原始高度)

    n slideToggle():切换元素的显隐状态(改变的是高度)

    n fadeIn():让元素显示(透明度逐渐变为不透明)

    n fadeOut():让元素隐藏(改变透明度逐渐变为透明)

    n fadeToggle():切换元素的显隐状态(改变透明度)

    n animate():自定义动画

    $(“#box1”).animate({”+=50px”, height:”200px”}, 1000)

    九、 其他函数

    n height()、height(val)

    n width()、width(val)

    n val(value)、val()

    n text(value)、text()

    n html(value)、html()

    上述函数有参数表示赋值,没有参数表示获取值。

    十、 ajax

    n load(url)

    通过ajax加载内容。

    $(“#box1”).load(“http://192.168.2.1:8080/ajax_2017010701/gettime.do”);

    n $.get(url, parameter, callback, type)

    以get方式向服务器发送请求

    n $.post(url, parameter, callback, type)

    以post方法向服务器发送请求

    n $.getJSON(url, parameter, callback)

    以get方式向服务器发送请求,并且服务器返回的结果为json格式

    n $.ajax({

    type:”get|post”,

    url:”请求的地址”,

    success:function(data){请求成功后的回调函数},

    error:function(xhr){请求失败时调用的函数},

    dataType:”text|json|html|js”

    })

    最底层的一个ajax函数,上面所有的方法都可以通过这个函数实现

  • 相关阅读:
    FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
    用户和组管理2
    一次性show 出所有配置
    RHCE7-学习里程 root 密码重置换
    RHCE7 学习里程-4用户权限,简单进程管理
    RHCE7 学习里程-3基本命令
    RHCE7 学习里程-2.telnet 服务配置
    RHCE7 学习里程-1.配置IP,DNS
    SDN openflow 学习小得
    思科ASA 基础学习
  • 原文地址:https://www.cnblogs.com/dongwenfei/p/6645944.html
Copyright © 2011-2022 走看看