Jquery初探

PV:

#一、jQuery

1.jQery核心语法

​ jq的核心语法： jQuery(“选择器”)， jQuery(callback)， jQuery(html)。其中jQuery可以使用$代替。

2.js和jQery对象比较

  1. JS对象（DOM）

    DOM：是文档对象模型；DOM对象指的是这个文档（html）中的某一个具体的节点对象；

  2. jQuery对象

    jQuery对象是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法，调用自己的方法html与css处理，得到的效果与标准的JavaScript处理结果是一致的。

    ​jQuery ——–> js

    jQuery对象[0]；

    jQuery对象.get(0)；

    ​js ———> jQuery

    只需要使用$将JS对象包裹即可：$(dom)

3.两者方法不通用

​ jQuery对象不能使用JS对象的方法；

​ JS对象不能使用jQuery对象的方法；

4.事件注册

​ js的事件的写法：js对象.onclick = function(){ … … }
​ jquery的事件的写法：jquery对象.click( function(){ … … } )
​ JS可以使用事件绑定和事件派发两种事件注册方式；

​ jQuery只能使用事件派发的方式来绑定事

5.onload事件

​ js的页面加载完毕：

1
window.onload = function(){ ...... }

​ jquery的页面加载完毕：

1
2
$(function(){})
$(document).ready(function(){... ... })

6.jQuery常用事件

事件 使用方法 说明
click() jq对象.click( function(){ //方法体 } ) 鼠标单击事件
blur() jq对象.blur( function(){ //方法体 } ) 失去焦点事件
change() jq对象.change( function(){ //方法体 } ) 内容改变事件
submit() jq对象.submit( function(){ //方法体 } ) 表单提交事件

#二、选择器

1.jQuery选择器

选择器 示例 说明
基本选择器 $(element),$("#id"),$(".class"),$(element,element) 元素，id，class，组合选择器
层级选择器 $("A B "),$("A > B"),$("A + B"),$("A ~ B") 根据标签之间的层级关系进行选择
属性过滤选择器 $("A[属性名]"),$("A[属性名!=值]") 根据标签的属性对选中的标签进行过滤
基本过滤选择器 $("div:first"),$("div:even") 根据标签所处的位置及特性进行过滤
表单对象属性过滤选择器 $(":selected"),$("input:disabled") 根据表单对象的属性对选中的标签进行过滤
可见性过滤选择器 $("input:visible"),$("input:hidden") 根据表单是否可见进行过滤。不可见的元素包括：1.隐藏域；2.style=”display:none”
内容过滤选择器 $("div:has('selector')") 根据元素中包含的内容过滤
表单过滤选择器 $(":input")$(":radio") 根据表单的特性进行过滤

2.基本选择器

​ 基本选择器主要有：标签名（元素）选择器，id选择器，class选择器和组合选择器；如下：

选择器 使用示例 说明
标签名（元素）选择器 $(p),$(div) 根据标签名选择具有相同标签名的标签
id选择器 $(#idVal) 根据标签的id属性值选择
class选择器 $(.classVal) 根据标签的class属性值，选择具有相同class属性值的元素
组合选择器 $(div,p) 将多个选择器选中的标签合并返回
* $(*) 选择页面上的所有标签

3.层级选择器

根据元素之间的层级关系进行选择。

选择器 名称 描述
$(“A空格B”) 后代选择器 后代选择器:选择给定祖先A元素的所有后代B元素，包括子元素，孙子元素等全部后代元素
$(“parent > child”) 直接子元素 子选择器:选择所有指定”parent”元素中指定的”child”的直接子元素
$(“A+ B”) 相邻兄弟 相邻兄弟选择器:选择所有紧接在A元素后的第一个B元素
$(“A~ B”) 后面的兄弟元素 后面兄弟选择器：匹配“A”元素之后的所有兄弟B元素。
$(“A”).siblings(“B”); 一般兄弟元素 兄弟元素选择器 ：匹配所有的（之前+之后）兄弟元素

4.属性过滤选择器

属性过滤选择器的作用：1.先选中；2.再根据属性过滤出想要的元素；

过滤器 使用示例 说明
[attribute] $(“input[name]”) 过滤拥有指定属性的元素
[attribute=value] $(“input[name=userName]”) 过滤出属性值=value的元素
[attribute!=value] $(“input[name!=password]”) 过滤出属性值！=value的元素
[attribute^=value] $(“input[name^=myClass]”) 过滤出属性值以value开始的元素
[attribute$=value] $("input[name$=myClass]") 过滤出属性值以value结束的元素
[attribute*=value] $(“input[class*=myClass]”) 过滤出属性值含有value的元素
[attr1][attr2][attr3]... $("input[name=username][value!=张三]..."") 过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合

5.基本过滤选择器

过滤方法 使用示例 说明
:first $("tr:first")：第一个tr，相当于$("tr:eq(0)") 第一个位置
:last $("tr:last"):tr中的最后一个，相当于$("tr:eq(-1)") 最后一个位置
:odd $("tr:odd"):tr中的奇数行（1,3,5,7……） 奇数位置
:even $("tr:even"):tr中的偶数行(2,4,6,8……) 偶数位置
:eq(index) $(“tr:eq(0)”)：第一个tr 选取指定索引的元素
:gt(index) $(“tr:gt(1)”)：索引大于1的tr，即第2个tr之后的tr 选取索引大于指定索引的元素
:lt(index) $(“tr:lt(3)”)：索引小于3的tr，即前3个tr(0,1,2) 选取索引小于指定索引的元素
:not(selector) $("tr:not(tr:eq(2))"):tr中除第2行外的行 去除与给定选择器匹配的元素（排除）
:header $(":header")：获取h1到h6 匹配所有标题元素
:animated $(":animated"):匹配所有正在执行动画效果的元素 匹配所有正在执行动画效果的元素
:focus $("input:focus"):获取input中获取焦点的 匹配所有获取焦点的元素

6.表单对象属性过滤选择器

表单对象属性过滤选择器是根据表单元素的某些属性来进行过滤选择的。

过滤器 使用示例 说明
:enabled $(“input:enabled”) 过滤可用的元素
:disabled $(“input:disabled” 过滤不可用的元素
:checked $("input[type=checkbox]:checked")或$(":checkbox:checked") 过滤被选中元素(复选框、单选框等，不包括select中的option)
:selected $("select option:selected") 过滤被选中的元素（select的option）

7.可见性过滤选择器

​ 可见性过滤选择器是根据标签是否可见进行过滤的，页面上能够看见的标签都是可见的。不可见的标签主要包括以下两种：

  1. 隐藏域：<input type="hidden" name="id" value="520"> ；
  2. diaplay属性隐藏：<div style="display:none"></div> ;
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
	//<input type="button" value=" 选取所有可见的div元素" id="b1" />
	$("#b1").click(function(){
		
		$("div:visible").css("background-color","yellow");
	})
	//<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2" />
	$("#b2").click(function(){
		
		$("div:hidden").show();
	})
});

8.内容过滤选择器

内容过滤选择器是根据标签中时候包含有某些内容，来对选择的标签进行过滤的。语法格式：$("div:has(selector)") 。

1
2
3
4
5
6
7
$(function() {
	//<input type="button" value="选取含有class为mini元素 的div元素." id="btn1" />
	$("#btn1").click(function(){
		
		$("div:has('.mini')").css("background-color","yellow");
	})
});

9.表单选择器

​ 根据表单子标签的type属性进行过滤。目前只需要大家知道:input选择器选中的标签有哪些。其余的都可以使用属性过滤选择器来代替。

选择器 使用方法 说明
:input $(":input") 过滤出所有的表单子标签，包括：input，select，textarea，button
:text $(":text") 过滤出表单子标签中type=”text”的标签
:password $(":password") 过滤出表单子标签中type=”password”的标签
:radio $(":radio") 过滤出表单子标签中type=”radio”的标签
:checkbox $(":checkbox") 过滤出表单子标签中type=”checkbox”的标签
:file $(":file") 过滤出表单子标签中type=”file”的标签
:hidden $(":hidden") 过滤出表单子标签中type=”hidden”的标签
:button $(":button") 过滤出表单子标签中type=”button”的标签，和<button></button>标签
:reset $(":reset") 过滤出表单子标签中type=”reset”的标签
:submit $(":submit") 过滤出表单子标签中type=”submit”的标签
:image $(":image") 过滤出表单子标签中type=”image”的标签

#三、jQuery操作方法

1.jQuery的dom操作

方法 作用 说明
html()/text()/val() 设置或者获取：html代码/文本/值 方法不传参数为取值；方法传入参数为设置值
attr()/prop() 设置或者获取标签的属性 方法不传入参数为获取属性值，方法传入参数为设置属性值
addClass()/ removeClass() 添加或者移除标签的class属性 addClass()为添加class属性；removeClass()为移除class属性；
css() 设置或者获取css样式 方法传入一个参数（样式名）为获取指定样式；方法传入两个参数为设置样式
$("<p>茄子创意</p>") 创建新的标签 参数为完整的html标签
append()/prepend() 给父标签添加子标签 append（）：在父标签的子节点后面追加；prepend（）：在父标签的子节点前面追加；
remove()/empty() 移除标签（文本和子标签）/清空标签体（文本和子标签） remove()：移除标签（当前标签及其子标签）；empty()：清空当前标签中的内容（保留原标签）；

(1)、html代码/文本/值操作

  1. html()方法与dom中的innerHTML操作结果一样，获取的是标签中的html内容；
  2. text()方法与dom中的innerText操作的结果一样，获取的是标签中的文本内容；
  3. val()方法与dom中的value操作的结果一样，获取的是标签的vlaue属性值；
  4. html(),text()和val()方法如果不传入参数则为取值，如果传入参数则为赋值操作；

(2)、属性操作：attr()和prop()

  1. 对标签的普通属性的操作使用attr()方法更准确；
  2. 在获取checked或者selected属性值的时候建议使用prop()方法，其余都使用attr()方法；

(3)、class属性操作和css样式操作

  • class属性操作：
    • addClass()：给元素添加class属性；
    • removeClass()：给元素移除class属性；
  • css属性操作：
    • css(cssName)：获取标签的css样式；
    • css(cssName,cssValue)：给标签添加css样式；

(4)、html元素创建与插入

  1. html元素创建：$(html代码)；
  2. html元素插入：（注：a和b都是jq对象）

【内部插入】父子关系

方法 使用示例 说明
append() a.append(b) a把b插入到自己内部的后面（追加）
appendTo() a.appendTo(b) a把自己插入到b的内部的后面
prepend() a.prepend(b) a把b插入到自己内部的前面
prependTo() a.prependTo(b) a把自己插入到b的内部的前面

【外部插入】兄弟关系

方法 使用示例 说明
after() a.after(b) a把b插入到自己的后面
insertAfter() a.insertAfter(b) a把自己插入到b的后面
before() a.before(b) a把b插入到自己的前面
insertBefore() a.insertBefore(b) a把自己插入到b的前面

(5)、html元素的删除操作

删除元素主要用到以下两个方法：remove() 和empty()方法，两者的区别：

  • remove()方法：移除当前元素及其所有子元素；
  • empty()方法：将当前元素的所有子元素清空，保留当前元素；

【应用场景】

  1. remove()方法适用于完全删除元素及其子元素；
  2. empty()方法适用于将元素中的文本及其子元素清空，保留当前元素；如：清空select中的option。

2.jQuery效果

（1）元素的显示与隐藏

元素的显示与隐藏主要用到以下3个方法：

方法 使用示例 说明
show(speed,fn) $("#_div").show(3000,function(){ alert("Hello World") }) 参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
hide(speed,fn) $("#_div").hide(3000,function(){ alert("Hello World") }) 同上
toggle(speed,fn) $(“#_div”).toggle(3000,function(){ alert(“Hello World”) }) 同上

（2）元素的滑动显示与隐藏

元素的滑动显示与隐藏主要用到以下3个方法：

方法 使用示例 说明
slideUp(speed,fn) $("#_div").slideUp(3000,function(){ alert("Hello World") }) 通过高度变化（向上减少）参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
slideDown(speed,fn) $("#_div").slideDown(3000,function(){ alert("Hello World") }) 同上
slideToggle(speed,fn) $(“#_div”).slideToggle(3000,function(){ alert(“Hello World”) }) 同上

(3)元素的淡入淡出显示效果

元素的淡入淡出显示效果主要使用到以下3个方法：

方法 使用示例 说明
fadeIn(speed,fn) $("#_div").fadeIn(3000,function(){ alert("Hello World") }) 参数speed：元素显示的速度；参数fn：元素显示后执行的方法；
fadeOut(speed,fn) $("#_div").fadeOut(3000,function(){ alert("Hello World") }) 同上
fadeToggle(speed,fn) $(“#_div”).fadeToggle(3000,function(){ alert(“Hello World”) }) 同上

Powered by Hexo and Hexo-theme-hiker

Copyright © 2016 - 2018 Francis的个人博客 All Rights Reserved.

UV : | PV :