码迷,mamicode.com
首页 > Web开发 > 详细

jQuery总结

时间:2017-09-02 00:10:48      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:系统   check   complete   选择   不包含   添加   val   html   字符串   

jQuery
    零散的知识点
        什么是jQuery
            jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。
        DOM对象与jQuery对象的互相转化
            ① DOM对象转jQuery对象
jQuery对象 = $(DOM);
            ② jQuery对象转DOM对象
DOM对象 = jQuery对象[索引];
DOM对象 = jQuery对象.get(索引);
        jQuery中的事件切换
            hover(over,out) :鼠标悬浮与鼠标离开事件
            toggle(fn,fn) :事件切换,可以拥有多个参数,依次执行,第一次点击执行第一个fn,第二次点击执行第二个
        jQuery中阻止事件冒泡和阻止事件默认行为
            stopPropagation&preventDefault
        each方法
            jQuery对象.each(callback);
callback是一个回调函数,其结构如下:
function callback(i,item) {}参数说明:
i :每次遍历时,系统会自动将得到的索引下标放入变量i中
 item :每次遍历时,系统会自动将遍历得到的结果放入变量item中
item其实一个是DOM对象。
    选择器
        基本选择器
            .
            #
            element
        层级选择器
            空
                选取祖先元素下的所有后代元素(多级)
            >
                选择父元素下的所有子元素(一级);用以匹配元素的选择器,并且它是第一个选择器的子元素
            +
                选取当前元素紧邻的下一个同级元素
            ~
                后者是一个选择器,并且它作为第一个选择器的同辈,也就是选取同级元素
        简单选择器
            :first :获取第一个元素
            :last :获取最后一个元素
            :even 偶数,获取偶数行数据
            :odd  奇数,获取奇数行数据
            :eq(index) :获取索引等于index的元素,index默认从0开始
            :gt(index) 大于,获取索引大于index的元素
            :lt(index) 小于,获取索引小于index的元素
            :not(selector) :获取除指定选择器以外的其他元素
        内容选择器
            :contains(text) :获取内容包含text文本的元素
            :empty :获取内容为空的元素
            :has(selector) :获取内容包含指定选择器的元素;匹配含有选择器所匹配的元素的元素
            :parent :获取内容不为空的元素(特殊)
        可见性选择器
            :hidden :获取所有隐藏元素
            :visible :获取所有可见元素
        属性选择器
            [attribute] :获取具有指定属性的元素
            [attribute=value] :获取属性值等于value的元素
            [attribute!=value] :获取属性值不等于value的元素
            [attribute^=value] :获取属性值以value开始的元素
            [attribute$=value] :获取属性值以value结尾的元素
            [attribute*=value] :获取属性值包含value的元素
            [attribute1][attribute2]...[attributeN] :获取同时拥有多个属性的元素
            $(‘元素[属性=属性值]’)
        子元素选择器
            A:nth-child(index/even/odd) 下标从1算起,匹配子元素等于index/even/odd的元素; 匹配其父元素下的第N个子或奇偶元素; Selects all elements that are the nth-child of their parent.我自己的描述:匹配A选择器其父元素下选择器名为A的下标等于index/even/odd的元素
            :first-child :获取第一个子元素
            :last-child :获取最后一个子元素
            :only-child :如果当前元素是唯一的子元素,则匹配
        表单选择器
            :input :选取页面中的所有表单元素,包含select以及textarea元素
            :text :选取页面中的所有文本框
            :password :选取所有的密码框
            :radio    :选取所有的单选按钮
            :checkbox :选取所有的复选框
            :submit :获取submit提交按钮
            :reset :获取reset重置按钮
            :image :获取type=’image’的图像域
            :button :获取button按钮
            :file :获取type=’file’的文件域
            :hidden :获取隐藏表单
        表单对象属性选择器
            :enabled :获取所有可用表单元素
            :disabled :获取所有不可用表单元素
            :checked :获取所有选中的表单元素,主要针对radio以及checkbox
            :selected :所有所有选中的表单元素,主要针对select
        筛选(方法)
            eq(index|-index) :根据元素的index索引来匹配元素,前者默认从零开始,后者代表从1开始,从倒数index个索引开始匹配
            filter(expr) :使用过滤器来筛选元素
            not(expr) :匹配除指定选择器以外跟他同级的其他元素
            children([expr]) :匹配满足条件的子元素(一级关系)
            find(expr) :匹配满足条件的所有后代元素(多级关系)
            next([expr]) :匹配紧邻的同级的下一个元素
            nextAll([expr]) :匹配紧邻的同级的下一个元素
            prev([expr]) :匹配紧邻的同级的上一个元素
            parent([expr]) :匹配父元素
            parents([expr]) :匹配所有的满足条件的祖先元素
            siblings([expr]) :匹配所有同级元素(无论上下)
    jQuery中属性的操作
        基本属性操作
            attr(name) :获取元素的name属性
            attr(key,value) :设置元素的属性
            attr(properties) :一次为元素设置多个属性,要求参数是一个json对象
            attr(key,fn) :使用函数的返回值设置元素的属性
            removeAttr(name) :删除元素的name属性
        css属性操作
            css(name) :获取元素的name属性
            css(name,value) :设置元素的name属性
            css(properties) :一次为元素设置多个属性
        class属性操作
            addClass(class) :为元素添加class属性
            removeClass(class) :移除元素的class属性
            toggleClass(class) :切换元素的class属性,如果存在则移除,反之则添加
            hasClass(class) :判断元素是否具有class属性等于is(‘.‘+class)
        文本/值的操作
            html() :获取元素的html内容
html(val) :设置元素的html内容
 
val() :获取表单元素value值
val(val) :设置表单元素的value值
 
text() :获取元素的文本内容(不包含标签)
text(val) :设置元素的文本内容(如果包含标签,当做普通文本处理)
        offset属性操作
            offset() :获取元素的位置,返回json对象,包含left与top属性
            offset(coordinates) :设置元素的位置,要求参数是一个json对象,必须包含left与top属性
        尺寸属性操作
            width() :获取元素的宽度
            width(value) :设置元素的宽度
            height() :获取元素的高度
            height(value) :设置元素的高度
    动画的操作
        基本效果
            显示
                show([speed][,callback])
            隐藏
                hide()
            显示隐藏切换
                toggle()
        滑动效果
            slideUp,向上隐藏
            slideDown,向下展开
            slideToggle
        淡入淡出效果
            fadeIn()
            fadeOut()
            fadeTo(speed,opacity[,callback])
        自定义动画
            animate()
    文档处理
        内部插入
            append/prepend;appendTo/prependTo
        外部插入
            after/before;insertAfter/insertBefore
        删除
            empty/remove
        复制
            clone
        替换
            replaceWith
        包裹
            wrap/wrapAll/wrapInner
    jquery中的ajax技术
        底层的jQuery中的ajax技术
            jQuery.ajax(options)
参数说明:
options :只有一个参数,要求是JSON格式的数据,其可以设置如下属性:
async :是否异步,true代表异步,false代表同步。默认为true
cache :是否缓存,true代表缓存,false代表不缓存,默认为true
complete :当Ajax状态码为4时所触发的回调函数
contentType :请求头,如果是POST请求,此参数为application/x-www-form-urlencoded
data : 发送Ajax请求时所传递的参数,要求是一个字符串
dataType :期待的返回值类型,可以是text/xml/json数据类型
success :当Ajax状态码为4且响应状态码为200时所触发的回调函数
type :发送的http请求,可以是get,也可以是post
url :请求的url地址
        $.get
            $.get(url,[data],[callback],[type]) :发送Ajax中的get请求
$.post(url,[data],[callback],[type]) :发送Ajax中的post请求
参数说明:
url :请求的url地址
[data] :可选参数,代表发送Ajax请求时所传递的数据,可以是字符串格式也可以是json格式
[callback] :可选参数,代表当Ajax状态码为4且响应状态码为200时所触发的回调函数
[type] :可选参数,代表期待的返回值类型,可以是text/xml/json,默认为text文本类型
        $.post
            子主题 1

jQuery总结

标签:系统   check   complete   选择   不包含   添加   val   html   字符串   

原文地址:http://www.cnblogs.com/crazytata/p/7465350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!