jQuery基础知识

jQuery

jQuery能实现的效果,js都能实现;js能实现的效果,jQuery未必能实现

jQuery大体分为

事件

  1. 常用的基本事件
  • 鼠标事件
    • click
    • dblclick
    • mouseover
    • mouseenter
    • mouseout
    • mouseleave
    • mousewheel
      • 安装滚动插件:bootCDN查找,jQuery-mousewheel
      • 判断滚轮方向:e.origiEvent.wheelDelta
  • 键盘事件
    • keyup
    • keydown
    • keypress
  • 表单事件
    • focus
    • blur
    • change
  • 系统事件
    • unload
    • load
    • resize
    • scroll
  1. 事件绑定
  • 绑定
    • on / one
  • 解除绑定
    • off
  1. 事件的主动触发
  • trigger
    • 已经给某个元素绑定了某个行为
    • 通过 trigger 来满足天剑主动触发某个行为
  1. 事件的详细信息
  • 事件对象:e
  • 事件类型:e.type
  • 事件源:e.target
  • 鼠标坐标
    • 针对当前可视区:e.clientX / e.clientY
    • 针对整个页面:e.pageX / e.pageY
  • 阻止默认事件:e.prependDefault()
  • 阻止冒泡:e.stopPropagation()
  • 关联元素,原生中的,jQuery木有

dom操作

  1. 节点关系
  • 父节点
    • parent();
    • parents();
  • 子节点
    • children():只能找到儿子级别的
    • find():可以找到子子孙孙
  • 上一个哥哥元素
    • prev()
  • 下一个弟弟元素
    • next()
  • 所有的哥哥元素
    • prevAll()
  • 所有的弟弟元素
    • nextAll()
  • 所有的兄弟元素
    • siblings()
  • 索引
    • $(this).index()
  • 第一个子元素
    • $(xxx).first()
  • 最后一个子元素
    • $(xxx).last()
  1. dom的动态操作
  • 创建元素
    • $('<div></div>')
  • 克隆元素
    • clone() 如果参数为true,就是让当前克隆出来的对象具有被克隆对象的功能
  • 插入到容器的末尾
    • append()
    • appendTo()
  • 插入到容器的开头
    • prepend()
    • prependTo()
  • 插入到指定元素的后面
    • insertAfter()
  • 插入到指定元素的前面
    • insertBefore()
  • 删除指定的元素
    • remove()
  1. dom的属性操作
  • 获取
    • attr(一个参数)
  • 设置
    • attr(attr,value)
  • 移除属性
    • removeAttr(attr)

数据交互

  1. url: 请求地址
  2. type: 请求方式
  • get
  • post
  • jsonp
    • 可以实现跨域请求数据
    • 浏览器同源策略
      • 协议
        • http / https
      • 域名
      • 端口号
        • http -> 80
        • https -> 443
  1. data: 请求参数
  2. async: 是否异步
  3. cache: 是否缓存
  4. jsonp: 如果请求的json地址中,全局函数名字不是callBack,通过设置jsonp重新设置
  5. dataType: 返回的数据类型
  • json
  • jsonp
  1. success: function(data){}: 请求成功
  2. error : 请求失败

选择器

  1. 基本选择器
  • id
  • tagName
  • element
  1. 筛选
  • 层级选择器
    • :first -> .first()
    • :last -> .last()
    • :eq() -> .ep()
    • :lt -> :gt
    • :odd :even
    • :parent
  • 属性选择器
    • $('div[class^="box"])
  • 表单选择器
    • $(:text').val()

运动

  1. show() / hide() -> toggle()
  2. fadeIn() / fadeOut() -> fadeToggle()
  3. slideDown() / slideUp() -> slideToggle
  4. animate()

扩展插件

  1. 实例方法:$().xxx()
    • $('.wrap').trigger('click')
      • $.extend(),给类上扩展静态方法,只有类能使用
  2. 工具方法:$.xxx() ->$.ajax()
    • $.fn.extend() -> 给原型上扩充方法 ->只有实例能使用$()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269