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