把一些通用的函数事先写好，放在外部单独js文件中，在手动编写网页代码，就可重复使用这些通用函数，大大简化网页代码的编写工作，提高网页开发的效率。
john Resig于2006年初创建JQuery，也即开源的JQuer JavaScript开发库，HTML DOMM的很多复杂编程操作都可轻松实现，大大减轻web前端开发人员的变成难度，提高了编程效率
JQuery是一个快捷、小巧和特性丰富的javascript库，凭借简洁语法和跨平台性的兼容性，大大简化了js开发人员便利HTML文档，操作DOM，处理事件、执行动画和开发Ajax的操作，其独特而优雅的代码风格改变了js程序员的设计思路和编写程序的方式。
主流javascript库
JQuery、Protoype、YUI、Dojo
主要功能：
修改文档中的元素
修改页面外观
改变文档内容
相应用户的交互操作
为页面添加动态效果
无需刷新页面从服务器获取信息
简化常用的javascript任务
- 概念:一个JavaScript框架.简化js开发,本质上就是一些js文件,封装了js原生代码而已;
- 快速入门
- 步骤:1.下载JQuery,2.JQuery的js文件,3.使用
- jquer-xxx.js:开发版本.给程序员看的,有良好的缩进和注释信息
- jquery-xx-min.js生产版本.程序中使用,没有缩进.体积小程序加载更快;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="div1"> 111</div>
<div id="div2"> 222</div>
<script>
var div1=$("#div1");
alert(div1.html());
var div2=$("#div2");
alert(div2.html());
</script>
</body>
</html>
- JQuery对象和js对象的区别与转换
//JQuery对象在操作时更加方便.
//JQuery对象和js对象方法不通用的
//两者相互转换
//jq-->js:jq对象[索引]或者jq对象.get(索引)
//js-->jq:$(js对象) - 选择器:筛选具有相似特征的元素(标签)
基本语法学习- 事件绑定 //给按钮添加点击事件
$("#b1").click(function(){alert("ABC")}); - 入口函数 /**
- window.onload和$(function())区别
- window.onload只能定义一次,如果定义多次,后边会将前边的覆盖掉
- $(function)可以定义多次
*/
- 样式控制
$("#div1").css("backgroundColor","red");
- 事件绑定 //给按钮添加点击事件
- DOM操作
- 内容操作
- html():获取/设置元素的标签体内容
<a><font>内容</font></a> - text():获取/设置元素的标签体纯文本内容
<a><font>内容</font></a>-->内容 - val():获取/设置元素的value属性值
- html():获取/设置元素的标签体内容
- 属性操作
- 通用的属性操作
- attr():获取/设置属性的值
- removeAttr():删除属性的值
- prop():获取/设置属性的值
- removeProp():删除属性的值
- 区别attr和prop区别?
- 如果操作的元素是固有属性,则建议使用prop
- 如果操作的元素是自定义属性,则建议使用atty
- 对class属性操作
- addClass():添加class属性值
- removeClass():删除class属性值
- toggleClass():切换class属性值
- toggleClass("one"):判断如果元素对象上存在class="one",则将属性值one删除掉,如果元素对象上不存在class="one",则添加;
- css():
- 通用的属性操作
- CRUD操作
- append():父元素将子元素追加到末尾
- 对象1.append(对象2);将对象2添加到对象1元素内部,并且在末尾;
- prepend():父元素将子元素追加到开头//同时也会将对象1的txt内容前面,会导致li出现问题;
- 对象1.prepend(对象2);将对象2添加到对象1元素内部,并且在开头;
- appendTo():
- 对象1.appendTo(对象2);将对象1添加到对象2内部,并且在末尾;
- prependTo():
- 对象1.prependTo(对象2);将对象1添加到对象2内部,并且在开头;
- after():添加元素到对应元素后边
- 对象1.after(对象2):将对象2添加到对象1后边.对象1和对象2是兄弟关系;
- before():
- 对象1.before(对象2):将对象2添加到对象1前面.对象1和对象2是兄弟关系;
- insertAfter():
- 对象1.insertAfter(对象2):将对象1添加到对象2后边.对象1和对象2是兄弟关系;
- insertBefore():
- 对象1.insertBefore(对象2):将对象1添加到对象2前面.对象1和对象2是兄弟关系;
- remove():移除元素
- 对象.remove();将对象删除掉
- empty():清空元素所有的后代元素.
- 对象.empty();将对象后台元素全部清空,但是保留当前对象以及其属性节点;
- append():父元素将子元素追加到末尾
- 内容操作
- 案例:
隔行换色
JQuery 高级
-
动画
- 三种方式显示和隐藏元素
- 默认显示和隐藏方式
- show(speed,easing,fn);
- speed动画的速度.三个预定义的值:slow normal fast或者输入毫秒值1000
- easing:用来指定切换效果,默认是 swing,可用参数 linear区别:
- swing:动画执行时效果是先慢,中间快,后慢;
- linear:动画执行速度是匀速的;
- fn:在动画完成时执行的函数,每个元素执行一次.
- hide();
- toggle();
- show(speed,easing,fn);
- 滑动显示和隐藏方式
- slideDown();
- slideUp();
- slideToggle();
- 淡入淡出显示和隐藏方式
- fadeIn();
- fadeOut();
- fadeToggle();
- 默认显示和隐藏方式
- 三种方式显示和隐藏元素
-
遍历
- js遍历方式
- for(初始值;顺换条件;不常);
- jq的遍历方式
- 返回值jq对象.each(callback);
- $.each(object,[cllback]);
- for..of:
- js遍历方式
-
事件绑定
- JQuery标准的绑定方式
- jq对象.事件方法(回调函数)
- 注:如果调用事件,不传递回调函数,则会出发浏览器默认行为(如.focus()让输入框获得焦点)
- 表单对象.submit();//让表单提交
- on绑定事件/off接触绑定
- jq对象.on("事件名称",回调函数)
- jq对象.off("事件名称")
- 如果off方法不传递任何参数,则将组件上的所有事件全部解除
- 事件切换toggle
- jq对象.toggle(fin1,fin2...)
- 当点击jq对象对应的组件后,会执行fin1,第二次点击会执行fin2...
- 注意:1.9版本.toggle()方法删除,jquer Mirate(迁移)插件可以恢复此功能.
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
-
插件:增强jquer的功能
- 实现方式
- $.fn.extend(object)
- 增强通过jquery获取的对象的功能
id")
- 增强通过jquery获取的对象的功能
- $.extend(object)
- 增强JQuery对象自身的功能 $/Jquery
- $.fn.extend(object)
- 实现方式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$.fn.extend({
chek:function(){
//this调用该方法的jq对象
this.prop("checked",true);
},
unchek:function(){
this.prop("checked",false);
}
});
$(function(){
});
function checkFn(){
//获取复选框对象
$("input[type='checkbox']").chek();
}
function uncheckFn(){
//获取复选框对象
$("input[type='checkbox']").unchek();
}
</script>
</head>
<body>
<input id="check" type="button" value="select all" onclick="checkFn()">
<input type="button" value="select ont all" onclick="uncheckFn()">
<br />
<input type="checkbox" value="ee">zuqiu
<input type="checkbox" value="e2e">zuqiu
<input type="checkbox" value="e3e">zuqiu
</body>
</html>
$.extend({
chek:function(a,b){
return a>=b?a:b;
},
unchek:function(a,b){
return a<=b?a:b;
}
});
$(function(){
var max=$.chek(5,3);
alert(max);
});
网友评论