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 值

创建元素

$(‘元素内容’)

$(‘

this is a paragraph!!!

’)

添加元素(常用)

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):该事件触发执行的函数

你可能感兴趣的:(2019-05-31)