jQuery相关技术

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34241036

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量107

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/jinyeyaonitian/blog/823323

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.1 jQuery概述：

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件很多。

jQuery2.0及后续版本不再支持IE6/7/8版本的浏览器。

核心理念：write less,do more(写得更少，做得更多)

作用：大大地简化了js代码，然后将html代码和js代码做了分离

1.2引入和对象获取

导入jQuery相应的js库到项目下，在html页面使用<script>导入

基本语法：jQuery(选择器) 或 $(选择器)

在jQuery中”jQuery==$”, 区分大小写

1 获得jQuery对象

命名约定：jQuery对象变量名建议以$开头

var $demoId = $(“#demoId”);

注释：

//单行注释 /*块注释*/

1.3 jQuery对象和js的DOM对象转换

jQuery对象和DOM对象可以相互转换，但两个对象的函数不能彼此混搭使用。

DOM对象转换成jQuery对象：$(DOM对象)

jQuery对象转换成DOM对象：$username[0]或$(“username”)[0]

//1原生javascript获得value值

var d1 = document.getElementById(“demoId”);

alert(d1.value);

//2将js的DOM对象转换成jQuery对象

//语法：$(DOM对象) 或 jQuery(DOM对象)

var $d2 = $(d1);

alert($d2.val());

//3将jQuery转换成js的DOM对象

// jQuery对象内部以数组方式存放所有匹配所有数据，如果只匹配到//一个，索引号为0

var d3 = $d2[0]; 或 var d3 = $(d2)[0];

alert(d3.value);

1.4基本操作

1.4 .1 jQuery页面加载

jQuery提供ready()函数，用于页面成功加载后执行。

//实际开发中，习惯将<script>标签编写在<head>标签体内

//整个页面的解析是从上往下的，此时将不能获得<input>对象

alert($(“#demoId”).length); //获得匹配对象的个数，0表示没有匹配到任何对象

//1 javascript页面加载

Window.onload = function(){

alert(“js页面加载”);

}

//2 jQuery页面加载

$(document).ready(function(){

alert(“jQuery页面加载”);

})

//3简化的jQuery页面加载

$(function(){

alert(“简化的jQuery页面加载”);

})

//注意：

//js给onload只能赋一个值，如果多次赋值，后面的覆盖前面的

//jQuery的ready可以使用多次，多个页面加载将依次执行

</script>

<body>

</body>

1.4.2 jQuery的效果

(1)通过改变元素的高度和宽度，显示或隐藏

show(speed, [fn]) 显示

参数1 speed，显示速度，单位：毫秒。固定字符串：slow,normal,fast

参数2 (可选)fn，显示成功之后的回调函数

hide() 隐藏

toggle() 切换

(2)通过改变元素的高度，显示或隐藏

slideDown(speed, [fn]) 显示，高度值逐渐变大

slideUp(speed, [fn]) 隐藏，高度值逐渐变小

slideTpggle() 切换

(3)通过改变元素的透明度，显示或隐藏

fadeIn(speed, [fn]) 显示，从透明到不透明

fadeOut(speed, [fn]) 隐藏，从不透明到透明

fadeToggle() 切换

fadeToggle(speed, opacity, [fn]) opacity：0-1之间表示透明度的数字

1.5 jQuery的选择器(重点***) 作用：快速锁定标签元素

(1)基本选择器

$(“#ID名称”) ID选择器条件：标签上必须有id属性

$(“.class名称”) 类选择器条件：标签上必须有class属性

$(“标签名”) 标签元素选择器

$(“*”) 通配符选择器

$(“#id名, .class名”) 或关系组合选择器

$(“[id=’id名’][class=’class名’]”) 且关系组合选择器

(2)层级选择器

元素1 元素2 匹配元素1下面的所有元素2(包括子孙)

元素1>元素2 匹配元素1下的第一层元素2(只匹配儿子)

元素1+ 自动匹配元素1的下一个兄弟元素

元素1~ 自动匹配元素1后面的所有兄弟元素

(3)基本过滤选择器

:first 过滤出第一个元素

:last 过滤出最后一个元素

:even 过滤出索引是偶数的元素

:odd 过滤出索引是奇数的元素

:not 去除所有与给定选择器匹配的元素

:eq(index) 过滤出一个给定索引值的元素

:gt 匹配所有大于给定索引值的元素

:lt 匹配所有小于给定索引值的元素

:header 匹配如h1,h2,h3之类的标题元素

:animated 匹配所有正在执行动画效果的元素

:focus 获得焦点 (1.6+有此过滤器)

(4)属性选择器

元素[元素属性] 匹配元素上有某个属性的元素

元素[元素属性=属性值] 匹配元素上某个属性等于某个值的

元素[元素属性!=属性值] 匹配元素上某个属性等于某个值的

元素[元素属性^=属性值] 匹配元素上属性名以属性值开头的

元素[元素属性$=属性值] 匹配元素上属性名以属性值结尾的

元素[元素属性*=属性值] 匹配元素上属性名含有属性值的

(5)表单属性选择器

$(“input:enabled”) 获取所有可用的元素

$(“input:disabled”) 获取所有不可用的元素

$(“input:checked”) 获取所有被选中的复选框/单选框

$(“select option:selected”) 获取所有被选中的下拉选框

$(“select>option:selected”) 获取所有被选中的下拉选框

1.6隔行换色相关技术(CSS类)

addClass(class|fn) 给指定标签的class属性追加样式

removeClass(class|fn) 将标签指定的class属性移除

toggleClass(class|fn[,sw]) 切换class属性样式(无则添加，有则删除)

例如，给表格的奇偶数行设置不同的背景颜色

CSS样式：

.even {background:#FFF38F;} /*偶数行样式*/

.odd {background:#FFFFEE;} /*奇数行样式*/

JavaScript代码：

$(“tr:even”).addClass(“even”);

$(“tr:odd”).addClass(“odd”);

1.7复选框全选相关技术

prop()操作的标签的特性。

JQ1.6新特性，获得一些第一次分配undefined属性值的标签时，如果抛出异常，将忽略浏览器生成的任何错误。

removeProp()移除标签的特性。

attr()设置标签属性。

removeAttr()移除标签的属性。

注意：prop()和attr()使用时容易混淆，建议先使用prop()，如果没有效果，再使用attr()。

prop()用法，部分代码如下：

$(function(){

$("#首个复选框ID名").click(function(){ $("input[name=ck]").prop("checked",$("#首个复选框 ID 名").prop("checked"));

})

1.1属性操作：val、text、html

val() 获得value属性的值

val(值) 给value属性设置值

text() 获得文本，如果有标签，则忽略

text(值) 设置文本，如果含标签，不进行解析，原样输出

html() 获得html代码，如果有标签，一并获得

html(值) 设置html代码，如果有标签，将进行解析

1.2遍历函数：each

方式1：$(ele).each(fn);

方式2：$.each($ele,fn);

回调函数fn：function(index, docEle)

参数1：遍历索引号

参数2：遍历当前对象docEle == this (DOM对象)

1.3文档处理：内部插入

A.append(B); //将B插入到A内部元素的最后面(追加)

A.prepend(B); //将B插入到A内部元素的最前面

A.appendTo(B) //将A插入到B内部元素的最后面(追加)

A.perpendTo(B) //将A插入到B内部元素的最前面

1.4常见事件总结 (突出显示为重点)

blur() 失去焦点	focus() 获得焦点
change() 改变，select列表项改变(适用于下拉列表)
click() 单击	dblclick() 双击
keydown() 键盘按下	keyup() 键盘弹起
keypress() 按键盘
mousedown(fn) 鼠标按下	mouseup(fn) 鼠标弹起
mouseover(fn) 鼠标滑过	mouseout(fn) 鼠标离开
mousemove(fn) 鼠标移动
resize(fn) 改变窗口大小	scroll(fn) 滚动(滚动条)
select() 选中	submit() 提交
unload(fn) 页面卸载