2019-05-31

jQuery知识点

"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象,通过该对象

可以获取 jQuery 对象,调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供

的方法。

1、 Dom对象(javascript 中获取 Dom 对象)

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

2、 jQuery包装集|对象(可以说是Dom对象的扩充)

在 jQuery 的世界中将所有的对象, 无论是一个还是一组,

都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:

var jQueryObject = $("#testDiv");

3、 Dom转jQuery对象

Dom 对象转为 jQuery 对象,只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象

mydiv = $(domDiv);

4、 jQuery  对象转 Dom  对象

jQuery 对象转 Dom 对象,只需要取数组中的元素即可

//第一种方式 获取 jQuery 对象

var jqueryDiv = jQuery('#mydiv');

//第二种方式 获取 jQuery 对象

jqueryDiv = $('#mydiv');

var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom

5、 jQuery  选择器

基础选择器(常用)

选择器                名称            举例

id 选择器            #id                    $("#testDiv")选择 id 为 testDiv 的元素

元素名称选择器  element                $("div")选择所有 div 元素

类选择器     .class          $(".blue")选择所有 class=blue 的元素

层次选择器

选择器        名称                              举例

后代选择器  ancestor descendant  $("#parent div")选择 id 为 parent 的元素的所有 div 元素

子代选择器  parent > child  $("#parent>div")选择 id 为 parent 的直接 div 子元素

相邻选择器  prev + next  $(".blue + img")选择 css 类为 blue 的下一个 img 元素

同辈选择器  prev ~ sibling  $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

单选择器(forms)

表单选择器  :input  查找所有的 input 元素:$(":input");注意:会匹配所

有的 input、textarea、select 和 button 元素。

文本框选择器  :text  查找所有文本框:$(":text")

密码框选择器  :password  查找所有密码框:$(":password")

单选按钮选择器 :radio

查找所有单选按钮:$(":radio")

复选框选择器  :checkbox  查找所有复选框:$(":checkbox")

提交按钮选择器 :submit

查找所有提交按钮:$(":submit")

图像域选择器  :image  查找所有图像域:$(":image")

重置按钮选择器 :reset

查找所有重置按钮:$(":reset")

按钮选择器  :button  查找所有按钮:$(":button")

文件域选择器  :file  查找所有文件域:$(":file")

6、 jQuery Dom操作

操作元素的属性

attr(属性名称)    获取指定的属性值,操作 checkbox 时选中返回

checked,没有选中返回 undefined。

attr('checked')

attr('name')

prop(属性名称)    获取具有 true 和 false 两个属性的属性值  prop('checked')

设置属性

attr(属性名称,属性值)  设置指定的属性值,操作 checkbox时选中返回 checked,没有选中返回 undefined。

attr('checked',’checked’)

attr('name',’zs’)

prop(属性名称,属性值)  设置具有 true 和 false 两个属性的属性值

prop('checked',’true’)

移除属性

removeAttr(属性名)  移除指定的属性  removeAttr('checked')

操作元素的样式

attr(“class”)                    获取 class 属性的值,即样式名称

attr(“class”,”样式名”)    修改 class 属性的值,修改样式

addClass(“样式名”)          添加样式名称

css()                                    添加具体的样式

removeClass(class)              移除样式名称

补充:增加元素的具体样式,格式:

1)css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

例:css({"background-color":"red","color":"#fff"});

2)css(“样式名”,”样式值”)

例:css('color','white')

操作元素的内容

对于元素还可以操作其中的内容,例如文本,值,甚至是 html。

html() 获取元素的 html 内容

html("html 内容") 设定元素的 html 内容

text()  获取元素的文本内容,不包含 html

text("text 内容")  设置元素的文本内容,不包含 html

val()  获取元素 value 值

val(‘值’)  设定元素的 value 值

创建元素

$(‘元素内容’)

$(‘<p>this is a paragraph!!!</p>’)

添加元素(常用)

prepend(content)      在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。

$(content).prependTo(selector)      把 content 元素或内容加入 selector 元素开头

append(content)        在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。

删除元素

remove()  删除所选元素或指定的子元素,包括整个标签和内容一起删。

empty()    清空所选元素的内容

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数,

index 为遍历元素的序列号,从 0 开始。

element 是当前的元素,此时是 dom 元素。

7、 jQuery事件

ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个,按顺序执行

$(document).ready(function(){})等价于$(function(){})

bind()绑定元素事件

为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType : 是一个字符串类型的事件类型,就是你所需要绑定的事件。这类类型可以包括如下:

blur, focus, focusin, focusout, load, resize, scroll, unload, click,

dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]:传递的参数,格式:{名:值,名 2:值 2}

handler(eventObject):该事件触发执行的函数

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

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,350评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,573评论 0 11
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,075评论 0 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2