jquery版本 script

转载

网络安全守护先锋 2024-10-31 17:00:37

文章标签 jquery版本 script 选择器回调函数属性值 文章分类 jQuery 前端开发

本人小白一枚，欢迎大家一起讨论学习，如有错误，还望大家指教。

简述：

JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

使用：

在使用这个这个框架之前，我们需要下载这js文件，官方下载地址。目前JQuery有三个大版本：

1.x：兼容ie678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

jquery版本 script_jquery版本 script

注意： 在使用JQuery的js文件时，我们导入min.js文件即可。这里我们说明一下：jquery-xxx.js是开发版本，是给我们开发人员使用的，因为该文件有良好的缩进和注释。而jquery-xxx.min.js属于生产版本，因该文件没有注释和缩进使得体积更少，便于程序的加载。

获取JQuery对象：
var jq = $(jq选择器);JQuery对象和Js对象的方法是不通用的。但两者可以相互转换。相对来说，操作JQuery对象时，更加快捷方便。

jq对象转化为js对象：jq对象[索引]或者jq对象.get(索引)
js对象转化为jq对象：$(js对象)

JQ入口函数：

// 与js入口函数不同的是，jq入口函数可以定义多次，
// 而js入口函数window.onload()方法只能定义一次，如果定义多次或定义将前面定义覆盖
$(functioin() {要执行的代码块});

JQ选择器：筛选具有相似特征的元素即便签。

基本选择器：

标签选择器（元素选择器）： 用法$("html标签名")获得所有匹配标签名称的元素。
id选择器： 用法$("#id的属性值")获得与指定id属性匹配的元素。
类选择器： 用法$(".class的属性值")获得与指定class属性值匹配的元素。
并集选择器： 用法$("选择器1, 选择器2....")获得多个选择器选中的所有元素。

层级选择器：

后代选择器： 用法$("A B")选择A元素内部的所有B元素。
子选择器： 用法$("A > B")选择A元素内部的所有B元素子元素。

属性选择器：

属性名称选择器： 用法$("html标签名[属性名]")包含指定属性的选择器。
属性选择器： 用法$("html标签名[属性名='属性值']")包含指定属性等于指定值的选择器。
复合属性选择器： 用法$("html标签名[属性名='属性值'][ ]....")包含多个属性条件的选择器。

过滤选择器：注意冒号前后不能用空格，否则过滤不出指定的元素，如$("div:first").css("backgroundColor", "pink");

首元素选择器： 用法:first获得选择的元素中的第一个元素。
尾元素选择器： 用法:last获得选择的元素中的最后一个元素。
非元素选择器： 用法:not(selector)不包含指定内容的元素。
偶数选择器： 用法:even获得偶数索引元素，索引从0开始。
奇数选择器： 用法:odd获得奇数索引元素，索引从0开始。
等值索引选择器： 用法:eq(index)获取指定索引元素。
大于索引选择器： 用法:gt(index)获取大于指定索引元素。
小于索引选择器： 用法:lt(index)小于指定索引元素。
标题选择器： 用法:header获得标题（h1~h6）元素，固有写法。

表单过滤选择器：

可用元素选择器： 用法:enabled获得可用元素。
不可用元素选择器： 用法:disabled获得元素。
选中选择器： 用法:checked获得单选/复选框选中的元素。
选中选择器： 用法:selected获得下拉框选中的元素。

DOM操作

内容操作：

html()： 获取/设置元素的标签体的内容。例如：<a>内容</a> 结果：内容
text()： 获得/设置元素的标签体纯文本内容。例如：<a>内容</a> 结果：内容
val()： 获取/设置元素的value属性值。

属性操作：

通用属性操作：

attr()： 获得/设置元素的属性，如果操作的是元素自定义的属性，则建议使用此方法。
removeAtrr()： 删除属性。
prop()： 获取/设置元素的属性，如果操作的是元素的固有属性，则建议使用此方法。
removeProp()： 删除属性。

class属性操作：

addClass()： 添加class属性值。
removeClass()： 删除class属性值。
toggleClass()： 切换class属性，例如：toggleClass("one")判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加。
css()： 设置元素的css样式。

CRUD操作：

append()： 父元素将子元素追加到末尾，对象1.append(对象2)：将对象2添加对象1元素内部，并且在末尾。
appendTo()： 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾。
prepend(): 父元素将子元素追加到开头，对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
prependTo()： 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头。
after(): 添加元素到元素后边，对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系。
insertAfter()： 对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系
before(): 添加元素到元素前边，对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系。
insertBefore()： 对象1.insertBefore(对象2)：将对象1添加到对象2前边。对象1和对象2是兄弟关系。
remove(): 移除元素，对象.remove():将对象删除掉。
empty(): 清空元素的所有后代元素，对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

JQ高级

动画：jq有三种方式显示和隐藏元素。

默认显示和隐藏方式：

show([speed, [easing], [fn]]) : 显示隐藏的匹配元素，并在动画完成后可选地触发一个回调函数。

speed： 动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
easing： 用来指定切换效果，默认是"swing"，可用参数"linear"。

swing： 动画执行时效果是先慢，中间快，最后又慢。
linear： 动画执行时速度是匀速的。

fn： 在动画完成时执行的函数，每个元素执行一次。

hide([speed, [easing], [fn]])： 隐藏显示的元素，并在动画完成后可选地触发一个回调函数。
toggle([speed], [easing], [fn])： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。

滑动显示和隐藏方式：方法的参数同默认方式一样

slideDown([speed], [easing], [fn])： 可以使匹配的元素以“滑动”的方式显示出来，并在动画完成后可选地触发一个回调函数。
slideUp([speed, [easing], [fn]])： 可以使匹配的元素以“滑动”的方式隐藏起来，并在动画完成后可选地触发一个回调函数。
slideToggle([speed], [easing], [fn]) ： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。

淡入淡出显示和隐藏方式：方法的参数同默认方式一样

fadeIn([speed], [easing], [fn])： 匹配的元素来实现淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut([speed], [easing], [fn])： 匹配的元素来实现淡出效果，并在动画完成后可选地触发一个回调函数。
fadeToggle([speed, [easing], [fn]])： 元素为可见则切换为隐藏；元素为隐藏反之，并在动画完成后可选地触发一个回调函数。

遍历：jq提供了三种方式遍历，在3.0之后出现了另一种。

js的遍历方式： for(初始化值;循环结束条件;步长)
jq的遍历方式：

一：jq对象.each(callback)

语法：jquery对象.each(function(index,element){});

index： 就是元素在集合中的索引
element： 就是集合中的每一个元素对象

回调函数返回值：

true： 如果当前function返回为false，则结束循环(break)。
false： 如果当前function返回为true，则结束本次循环，继续下次循环(continue)

二：$.each(object, [callback])
三：for…of 该方法是jq 3.0 版本之后提供的方式，用法为 for(元素对象 of 容器对象)

事件绑定

jq标准的绑定方式： jq对象.事件方法(回调函数); 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为，如表单对象.submit(); 让表单提交
on绑定事件/off解除绑定

jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)： 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

事件切换：toggle

jq对象.toggle(fn1,fn2…)： 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…，注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。 jquery-migrate-1.0.0.js

插件：用来增强JQuery的功能，实现方式有两种。

$.fn.extend(object)： 增强通过JQuery获取的对象的功能。
$.extend(object)： 增强JQuery对象自身的功能。

插件小案例1：

<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       $.fn.extend({
           check:function () {
               this.prop("checked", true);
           },
           uncheck:function () {
               this.prop("checked", false);
           }
       });

        $(function() {
            $("#btn-check").click(function () {
                $("input[type=checkbox]").check();
            });
            $("#btn-uncheck").click(function () {
                $("input[type=checkbox]").uncheck();
            });
        });
    </script>
</head>
<body>
	<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
	<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
	<br/>
	<input type="checkbox" value="football">足球
	<input type="checkbox" value="basketball">篮球
	<input type="checkbox" value="volleyball">排球
</body>
</html>

jquery版本 script_jquery版本 script_02

插件小案例2：

<html>
<head>
    <meta charset="UTF-8">
    <title>02-增强JQuery对象自身的功能</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            min:function (v1, v2) {
                return v1 >= v2 ? v2 : v1;
            },
            max:function (v1, v2) {
                return v1 >= v2 ? v1 : v2;
            }
        });
        $(function () {
            alert("最小值：" + $.min(1, 2) + "，最大值：" + $.max(5, 4));
        });
    </script>
</head>
<body>
</body>
</html>

jquery版本 script_属性值_03