jQuery学习总结

jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。

//当文档完成加载完时触发,避免获取dom对象时,dom对象还没有加载

$(document).ready(function(){

//写js语句或者jQuery函数

$("p").click(function(){

$(this).hide();

});

});

3、jQuery常用的选择器和事件,和CSS的选择器很相似。

$() – 使用CSS选择器匹配元素

jQuery的事件和JS的事件基本相同,在使用的时候,去掉JS事件前面的on即可。

jQuery常用的事件:

load:当文档加载时运行脚本

blur:当窗口失去焦点时运行脚本

focus:当窗口获得焦点时运行脚本

change:当元素改变时运行脚本

submit:当提交表单时运行脚本

keydown:当按下按键时运行脚本

keypress:当按下并松开按键时运行脚本

keyup:当松开按键时运行脚本

click:当单击鼠标时运行脚本

dblclick:当双击鼠标时运行脚本

mousedown:当按下鼠标按钮时运行脚本

mousemove:当鼠标指针移动时运行脚本

mouseout:当鼠标指针移出元素时运行脚本

mouseover:当鼠标指针移至元素之上时运行脚本

mouseup:当松开鼠标按钮时运行脚本

abort:当发生中止事件时运行脚本

4、jQuery常用的效果方法

$(selector).hide() – 隐藏被选的元素

$(selector).show() – 显示被选的元素

$(selector).toggle() – 对被选元素进行隐藏和显示的切换

$(selector).slideDown() – 通过调整高度来滑动显示被选元素

$(selector).slideToggle() – 对被选元素进行滑动隐藏和滑动显示的切换

$(selector).slideUp() – 通过调整高度来滑动隐藏被选元素

$(selector).fadeIn() – 逐渐改变被选元素的不透明度,从隐藏到可见

$(selector).fadeOut() – 逐渐改变被选元素的不透明度,从可见到隐藏

$(selector).fadeTo() – 把被选元素逐渐改变至给定的不透明度

$(selector).animate() – 对被选元素应用“自定义”的动画

4、jQuery常用的DOM元素操作方法

$(selector).parent() – 返回被选元素的直接父元素。

$(selector).parents() – 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (),可选参数来过滤对祖先元素的搜索

$(selector).children() – 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索

$(selector).find() – 返回被选元素的后代元素,一路向下直到最后一个后代,可选参数来过滤对后后代元素的搜索

$(selector).siblings() – 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。

$(selector).next() – 返回被选元素的下一个同胞元素。

$(selector).nextAll() – 返回匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。

$(selector).prev() – 返回的是前面的同胞元素

$(selector).prevAll() – 返回匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。

$(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。

$(selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。

$(selector).eq() – 指定索引的新元素。

$(selector).get() – 获得由选择器指定的 DOM 元素。

$(selector).index() – 返回指定元素相对于其他指定元素的 index 位置。

注:parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选,比如:parents()、siblings()、nextAll()、prevAll()、siblings()。

$(selector).each() 对对象进行迭代,为每个元素执行函数

$(selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素

$(selector).size() 返回被 jQuery 选择器匹配的元素的数量

$(selector).text() – 设置或返回所选元素的文本内容

$(selector).html() – 设置或返回所选元素的内容(包括 HTML 标记)

$(selector).val() – 设置或返回表单字段的值

$(selector).append() – 在被选元素的结尾插入内容

$(selector).prepend() – 在被选元素的开头插入内容

$(selector).after() – 在被选元素之后插入内容

$(selector).before() – 在被选元素之前插入内容

$(selector).remove() – 删除被选元素(及其子元素)

$(selector).empty() – 从被选元素中删除子元素

$(selector).removeAttr() – 从所有匹配的元素中移除指定的属性。

$(selector).clone() – 创建匹配元素集合的副本

$(selector).load() – 从服务器加载数据,然后把返回到 HTML 放入匹配元素

5、jQuery对CSS的操作

$(selector).height() – 设置或返回匹配元素的高度。

$(selector).width() – 设置或返回匹配元素的宽度。

$(selector).addClass() – 向被选元素添加一个或多个类

$(selector).removeClass() – 从被选元素删除一个或多个类

$(selector).toggleClass() – 对被选元素进行添加/删除类的切换操作

$(selector).css() – 设置或返回样式属性

$(selector).hasClass() 检查匹配的元素是否拥有指定的类。

6、jQuery其他知识点

$(selector).data() – 存储与匹配元素相关的任意数据

$(selector).removeData() – 移除之前存放的数据

$(selector).serialize() – 将表单内容序列化为字符串

$(selector).serializeArray() – 序列化表单元素,返回 JSON 数据结构数据

$冲突的解决办法

//释放$标识符的控制,使用默认的变量jQuery

$.noConflict();

//自定义变量

var jq = $.noConflict();

7、jQuery Ajax 操作函数

$.ajax() – 执行Ajax异步请求

$.get() – 使用GET请求从服务器获取数据

$.getJSON() – 使用GET从服务器请求JSON编码数据

$.getScript() – 使用GET从服务器请求JavaScript文件并执行该文件

$.post() – 使用POST请求从服务器获取数据

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

推荐阅读更多精彩内容

  • jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮...
    一直以来都很好阅读 263评论 0 1
  • 在jQuery中,主要的DOM操作分为以下几类: 一、查找节点 1、查找元素节点 2、查找属性节点利用jQuery...
    McRay阅读 422评论 0 0
  • 一、DOM的加载 在javascript中,我们一般是使用window.onload方法,在页面加载完毕后,浏览器...
    McRay阅读 296评论 0 1
  • jQuery选择器这一块,我大致用下面这张图片进行了归纳,分为两个块,一块是jQuery选择器的优势,另外一块,重...
    McRay阅读 197评论 0 0
  • 一、简介 游戏数据主要分两大类,一是留存,二是付费。通过常规数据来监控游戏运营状态,通过细化数据辅助决策。 常规数...
    叶萱草阅读 4,412评论 1 15