1 jQuery01 元素的基本操作

1、jQuery基本认知:

(1).jQuery是一个高效、精简并且功能丰富的JavaScript工具库,它提供的API易于使用并且兼容众多浏览器,其让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单;

(2).作用:简化DOM操作;减少开发中跨浏览器问题(兼容性);强大的选择器(sizzle);无new构造;实现链式调用;可以对外扩展自己封装的插件;

(3).基于作用补充:[原生js关于window系列方法以及后续DOM事件处理等很多地方针对不同浏览器都封装了兼容性方法,封装兼容性方法很重要,IE9之前IE是不遵循W3C标准的,需要处理很多兼容性问题,IE9的发布让浏览器兼容性问题有所缓和;jQuery内部封装了处理兼容性方法,但并非所有的兼容性都做了封装,部分还未解决(很少用到)];[jQuery提供了强大的选择器(sizzle内涉及大量的正则匹配),相比于原生js,其选择dom元素有更多选择方式];[无new构造中使用很巧妙的方式];[jQuery可链式调用,必须熟悉此用法,底层封装的便是return this,原生js有模拟链式调用][jQuery可对外扩展封装插件,在jQuery的extend方法上扩展];

(4).jQuery是强大的工具库,其从1.10 --->>3.3.1迭代的过程中也在逐步完善,底层封装原生的js,其可以解决大部分需求,但也有些需求不能很好实现,所以开发过程中jquery和原生js可以一起使用,并不会冲突;[目前jQuery宣布不再更新,需求场景基本都可以解决;封装工具库的团队真的很nice,基本把所有使用情况都想到了]

(5).jQuery底层封装的便是原生js,使用便捷;基础用法写完后,剖析底层源码,学习封装的思路;

2、(1).jQuery是函数,其也是对象;$是jQuery的别名;$();=== jQuery();//获取到类数组

(2).jQuery();和原生dom获取到的元素都是类数组对象,但两者却不等同,所以两者的方法不能通用,往往需要相互转换;(平时提到的jQuery是类数组,准确的说是其获取的元素是类数组,而jQuery是对象); $(window);$(document);$(this);以及将原生js获取到的对象作为参数都是不需要加引号的,若是直接选择标签都需要加引号,$("html"); $("head"); $("body")

3、元素的基本操作;[调阅jQuery的API文档,熟练应用]

(1).查找元素(选择器):

[1].基础选择器:

[2].筛选器:

基础筛选器和子元素筛选器的区别:$("ul li:first")等,若有多个ul>li集合,其会将所有元素看作大集合去筛选元素,只能选中整体ul下的首个li,其他的不能选中;$("ul li:first-child")系列等,若有多个ul>li,其会选中每个ul下的首个元素,但li必须作为ul下的首个孩子才能选中,否则不能选中

<input type="button">按钮 //点击不会提交; <input type="submit">点击提交数据                      <button></button>//等同于 <button type="submit"></button>,平时type省略了,点击提交数据,只要type=submit都会提交表单数据;

[3].根据元素关系进行选择元素(系列方法):$('ul li').eq(index); $('ul li').get(index);  $('ul').filter('.one');

find();//查找子元素

(2).创建元素:$("<div><ul><li>skr~</li></ul></div>");

(3).插入元素:[原生js中插入元素没有appendTo(); 也没有insertBefore(); 封装过该方法];append();等系列方法插入元素有两种类型,第1种插入新创建的元素,第2种将已经存在的元素插入,其是剪切操作,同原生js等同;[dom树上的对象就那么多,不创建便不会凭空产生,所以其是剪切操作,如果不想进行剪切,可以对原元素进行克隆,操作副本]  [append();appendTo();等方法括号内为jQuery对象,dom元素,选择器都OK,灵活性高]

(4).删除、替换、包裹、克隆元素:

[删除元素:empty();//删除选中元素的子元素;remove();//删除选中元素(自己)]

[原生js中替换元素:parent.replaceChild(new,old);]

4、demo练习;

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,472评论 1 45
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,334评论 0 8
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 4,594评论 0 20
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,578评论 0 7
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,376评论 0 44