JQuery学习

最新推荐文章于 2022-06-01 08:27:37 发布

喝西北风呀

最新推荐文章于 2022-06-01 08:27:37 发布

阅读量239

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27677039/article/details/102944207

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery 学习记录

大家都在说JQuery已经过时了，但是其实还是有很多项目在用jQuery做开发和维护，其实我在学习jQuery的过程中还是感觉有很多好用的地方，就以此文记录一下我的学习jQuery的相关基本知识点吧！

一、jQuery基本认识

1、jQuery对象是什么

jquery对象其实就是一个工具（A），定义了一套标准来操作HTML，这个对象需要我们导入到页面中，不过我们习惯于把利用jQuery方法获取到的标签元素节点称为jQuery对象（B）。下面的这三个描述都是说的这个B而不是A
（1）jQuery对象是利用jQuery对象获得的对象；
（2）特点是只能调用jQuery的方法或者属性，而不能调用JavaScript（以下简称JS）中DOM对象的属性和方法；
（3）控制台直接打印jQuery对象看似像一个数组，其实不是，是一个伪数组，是DOM对象的包装集，有博客说其实里面是键值对，但是可以调用数组的size()、length、index()之类的方法属性，所以是一个伪数组。

2、那么什么是DOM对象呢？

DOM称为文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。所以说DOM其实是API，就是定义了如何访问和操作HTML文档的一种标准；你同样可以把Dom对象理解为就是一个工具，这个工具专门用来掰扯HTML里面的内容的。
这个标准把我们HTML文档里的进行了如下划分：HTML中的标签，即元素节点，它们构成了HTML文档里的Dom树；而每一个元素节点中的属性即属性节点；文本元素的文本内容则被称为文本节点。
乱七八糟的东西，真抽象，傻傻搞不清楚！非专业前端，意思意思得了！

3、jQuery对象和DOM对象相互转换

（1）JS转jQuery，使用jQuery工厂，用 $(D O M 对象) 【$ =jQuery】
（2）jQuery对象转DOM对象，jQueryObj [i]或者jQuery对象get(0)

4、如何使用jQuery

//固定格式
<html>
<head>
	<title>页面标题</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="url路径/jquery-3.4.1.js"></script>

</head>

</html>

初始化函数：
JS初始化：

<script>
		function init()
{
}
</script>

<body onload=”init()”>
</body>

jQuery初始化

$(document).ready(function(){
});
简化写法：
$(function(){
});

5、差异

jQuery初始化函数是当网页中的dom元素节点全部加载完毕后，立刻执行，即DOM文档结构或者说DOM树绘制完毕或者说标签全部加载完毕（不管标签里面的视频图片有没有加载出来）之后就立刻执行初始化函数。可以写多个。
JavaScript：onload/window.onload则是等网页里面的内容资源全部加载之后才能执行。只能写一个。

二、基本、层次与属性选择器

1、选择器
（1）基本选择器
①标签选择器：$(“标签名”)
$(“p”).html() 获取p标签对象，是jQuery对象形式的

②类选择器$(“.class值”)，一般是针对CSS写的class
③id选择器
$KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id值”) ④并集选择器，逗号\dots$ (“.class值, #id值”), $KaTeX parse error: Expected 'EOF', got '#' at position 12: (“.myClass，#̲id1，#id2”) ⑤交集选\dots$ (“标签名.class名”)，注意在交接处一般只能是.或者#开头的的选择器
⑥全局选择器 $(“*”)
（2）层次选择器
①相邻选择器：加号，+，选择后面相邻的第一个元素，如 $(“#idName+p”),取得是id为id1之后的相邻的p标签的元素，记住必须是相邻的，不相邻不可以
②同辈选择器：波浪线，~，选择之后的同辈元素（在同一级中的标签），不包括自己
例如

<ul>
			<li id=”id1”></li>
			<li></li>
			<li></li>
		</ul>
<p></p>

这里的ul 和p是同辈的，而三个li是同辈的$(“#id1~li”)
③后代选择器，空格；
$(“p #id1”)，代表选择p标签下 id为id1的标签
子代选择器，>；
$(“ u l > l i ”) ，（ 3 ）属性选择器 [\dots \dots] 例如$ (“[……]”)：选中全部元素中，有这个属性的
选择某属性有特定属性值的标签元素：
例如$(“[class=xxx]”)，就是选中class为xxx的标签
$(“[class！=xxx]”)不等于，包含没有class和有class但是值不为xxx的
$(“[class^=x]”)以x开头
$(“ [c l a s s$ =x]”)以x结尾
$(“ [c l a s s * = x] ”) c l a s s 值中有 a 的元素（ 4 ）过滤选择器，冒号：（ 1 ）基本过滤选择器（从 0 开始）： f i r s t 最开头那一个，或者 . f i r s t （）： l a s t 最后那一个，或者 . l a s t （）： e v e n 偶数选择器： o d d 奇数选择器注意一个 D O M 对象和 j Q u e r y 对象的转化问题，$ ($(“ul>li:odd”)[1]).html()
：eq(index)，第index选择器，或者.eq(index)
：gt（index），大于index的全部元素
：lt(index)，小于index的全部元素
：not（选择器）：除了。。。。。以外
：header选中所有标题元素，例如，
$(":header").css(“background-color”,“blue”);
：focus获取焦点的元素，焦点就是光标所在的位置
function click(){
$(“input:focus”).css(“background-color”,”yellow”);}

(5)可见性选择器
：visible选取所有可见的选择器
：hidden选取所有不可见的选择器

代码样例如下

			<ul id="secUl">
        		<h1>hhh</h1>
        		<li class='aaa'>AAA</li>
        		<li class='bbb'>BBBB</li>
        		<li class='cac'>CCC</li>
       		 	<li class='ddd'>DDD</li>
        		<li class='eee'>EEE</li>
        		<li class='fff'>FFF</li>
       	 		<li class='ggg'>GGG</li>
   			 </ul>
   			 <script>
			$('#secUl>li').first().click(function(){
                alert("first");
            });
            $('#secUl>li：last').click(function(){
                alert("first");
            });
            $('#secUl>li:odd').click(function(){
                alert("odd");
            });
            $('#secUl>li:even').click(function(){
                alert("even");
            });
            $('#secUl>li').eq(2).click(function(){
                alert("eqeqeq");
            });
            $('#secUl>li:gt(4)').click(function(){
                alert("gtgtgt");
            });
            $('#secUl>li:lt(3)').click(function(){
                alert("ltltlt");
            });

            $('li:not(:even,.eee,.fff)').css('background-color', 'red');
             </script>

三、jQuery事件

1、jquery事件与javascript事件的区别
（1）jquery事件调用的事件函数写在ready（）里边，JS事件调用的事件函数写在ready（）或者init()外面
（2）jQuery事件一般是XX()，JS事件一般是onXXX()，例如click和onClick。
例如：

<li onClick= "jsClick()">AAAA</li>，JS将事件写在标签中；
function init(){
}
funnction jsClick(){
}
jQuery写在ready()里面；
$(function(){
		$("#B").click(function(){
						alert("单击事件");
					});jQuery将事件写在ready()函数中
});

2、常用的事件
（1）鼠标事件
click 事件
mouseover进入事件
mouseout出来事件
mouseenter事件
mouseleave事件
上面那组本元素和子元素都会触发事件，下面那组仅本元素触发
mousedown按下鼠标事件
（2）键盘事件
keydown()按下
keypress()压住
keyup()松开
keyCode可以传递键盘值

$("body").keydown(function(event){
					if(event.keyCode==13){
					alert("kongge键盘按下去");						
					}
				})//keydown和keyup事件不建议放在一起，分开来写

（3）光标事件
focus()和blur()用于获取光标和失去光标
之后可以用this获取当前标签对象，但是this是JS的DOM对象，$(this)转为jQuery对象。
备注：颜色#000000白色，#ffffff黑色，可用拾色器自己取色
（4）绑定事件bind与移除事件unbind[现在好像不怎么用了，过时了。都在使用on和off尽行动态绑定和解绑]，其次就是delegate()事件也介绍一下吧！
绑定一个事件：$(……).bind(“事件名”，[数据]，function(){……});

$("#inp").bind("click",function(){
					alert("input的bind点击事件");
				});
批量绑定：$(……).bind({
“事件名”:”funcion(){……},
“事件名”:”funcion(){……},

<ul>
    <li>111</li>
    <li>222</li>
    <li>3333</li>
    <li>444</li>
</ul>
<input type="button" id = 'test' value="bind测试" />

$('#test').bind('click', function(){
        $('li').bind('click', function(){
            alert("测试bind动态绑定是否可行！");
        });
        $('ul').append('<li>这是一个新li</li>');
    });
    //新添加的li元素并不会被添加click事件。

bind绑定方式有两个问题，隐式迭代和不支持动态绑定，意思就是指有几个li元素就要绑定几次事件，在bind之后新加的标签并没有绑定事件！
delegate()事件可以弥补这两个问题。

$("ul").delegate("li", "click", function () {
    alert($(this).text());
});

这样就算是之后新添加的元素标签也会有点击事件。
原理在于：这种方式采用了事件委托的概念。不是直接为p元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在div内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素，如此例中的div元素。冒泡的过程中，如果事件的currentTarget与选择器匹配时，就会执行代码。
但是也有缺点，那就是性能问题，DOM树较深的话性能就不好了。
其次就是on()事件绑定！on()其实是将以前的绑定事件方法作了统一，查看jQuery无压缩的源码（我这里看的版本是1.11.3），可以发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了。

代码如下:

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, “…” ) : this.off( types, selector || “…”, fn );
}

实现bind()的简单注册，

});```
实现delegate()的事件委托，
```$('祖先').on(‘click’, '子'， function（）{     
})```
$(‘…’).on(‘click’,’span’,function(){
	支持动态绑定
});

（5）hover（function(){……},function(){……}）
$(“……”).hover(function(){……}，function(){……});
等同于综合mouseover事件和mouseout事件，前面function是over时候执行
（6）如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
$(“……”).toggle(function1(){……}，function2(){……}，function3(){……});

隐藏与显示事件：（也可以利用show和hide事件）
toggle/show/hide(速度/时间)，toggle/show/hide（速度/时间，回调函数）
【注：回调函数，可以作为函数中的参数来被调用，并且作为参数时只写方法名不加括号（是作为一种引用作为参数），回调函数会在执行方法执行完毕之后才能执行。】
（7）淡入淡出事件
fadeIn()淡入显示；
fadeOut()淡出隐藏；
（8）下拉事件
slideDown()下拉显示；
slideUp()上拉隐藏；

四、操作DOM元素

1、样式操作
jQuery对象.css(“属性名”,”属性值”);
例如：$(“#test”).css(“display”,”none”);隐藏
jQuery对象.css({“属性名”：”属性值”，……， “属性名”：”属性值”});
增加addClass(“样式名1 样式名2……”);
移除样式removeClass(“样式名1 样式名2……”);
切换样式toggleClass（“样式名1 样式名2……”），点击一下显示所有样式，再点击一下去除所有样式
这里的样式名可以是我们自定义好的CSS的style样式

//我们可以实现对选定的项颜色加深的操作
<style>
        .bgC{
            background-color: gray;
        }
</style>
<ul id = 'uul'>
    <li id = 'a'>aaa</li>
    <li id = 'b'>bbb</li>
    <li id = 'c'>ccc</li>
    <li id = 'd'>ddd</li>
</ul>
$('li').on('click',function(){
            $(this).addClass('bgC').siblings().removeClass('bgC');
        });

2、内容操作
$(jquery对象).html();获取内容
$(jquery对象).html(赋值);赋值(对于HTML代码会先渲染后显示，页面会有效果显示)
$(jquery对象).text();获取内容
$(jquery对象).text(赋值);赋值（只显示内容，对于html代码不作做渲染）
$(jquery对象).val();获取内容
$(jquery对象).val(赋值);赋值。对于有value这个属性的标签操作，比如input

插入操作：
内部插入：$(jQuery对象).append(jQuery对象),appendTo(),prepend(),prependTo(),
外部插入：$(A)before(B)【B插入A之后】,$(A)insertBefore(B)【A插入B之后】,after(),,,,,
替换操作：
$(A)replaceWith(B);B替换A
$(B)replaceAll(A);B替换A
删除操作：
remove();彻底删除
detach();只删除节点，事件、数据不删除，没用的方法；
empty();只删除内容
克隆节点：
clone（true|false），true完全克隆，
★★★属性操作
$（jquery对象）attr(“属性名“)；获取
$（jquery对象）attr(“属性名”：“属性值”)；设置
$（jquery对象）attr({“属性名”：“属性值”，………….})；批量设置
$（jquery对象）removeAttr(“属性名”)；设置
获取集合与遍历集合
（1）子节点集合
$(…).children(“li”),可以找到某jQuery对象下一级的所有li标签，仅单一层级！
$(“div”).children(".selected").css(“color”, “blue”);会找到类名为 “selected” 的所有 div 的子元素，并将其设置为蓝色：
$(…).find(“li”) 后代集合（不推荐使用，影响性能），所以子孙后代
（2）同辈集合：
next()后一个
prev()前一个
siblings()同辈
parent（）父代
parents()祖先
（3）过滤选择
大多数（）里面都可以写过滤规则；
$().filter(规则)；例如“：odd”奇数
$().eq(index);
遍历集合元素：

$().each(function(index, element){//index，element可写可不写
	alert($(this).html());});

五、其他常用的操作补充

1、可以取值和设置值的DOM元素一些CSS操作方法：
【前面讲过 $(. .) . c s s (\dots) 、$ (…).addClass(…)】
height（）；
width（）；
offset（）偏移量
设置偏移量；
offsetParent();拿到最近的已定位的祖先元素，已定位的意思是元素position属性（默认static）设置为了relative或者absolute或者fixed，如果没有定为的话，会选定body
scrollLeft();左右滚动条定位位置坐标
scrollTop();上下滚动条
2、校验常用方法：
blur() 失去焦点时触发；
submit() 时触发
JS写法：
οnblur=””;
οnsubmit=””
3、jQuery：$(“jQuery对象”).submit(function(){

});
JS：οnsubmit=”return submit()”

六、校验表单校验

1、正则表达式的格式：/^开始标记，$/结束标记
2、[]匹配字符串，例如[a-z0-9]
3、\s空白字符串，空格或者tab键盘
4、\S非空白字符串
5、\d匹配一个数字字符，等同于[0-9]
6、\D非数字字符，等同于[ ^0-9]
7、\w匹配一个数字、下划线和字母，等同于[0-9a-zA-Z_]
8、\W任何非字母、数字、下划线[ ^0-9a-zA-Z]
9、.【这里有个黑点】匹配除换行符之外的任意单个字符，
10、{n}匹配前面的字符出现n次
11、{n,m}匹配前面的字符出现n~m次
12、？匹配前面的字符出现0次或1次
13、*匹配前面的字符出现至少0次
14、+匹配前面的字符出现至少1次
常用的正则表达式：
Ⅰ邮箱：^\w+@\w+(.[A-Za-z]{1,2})?
Ⅱ手机：

^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$```
或 var regMobile=/^1[3,5,8]\d{9}$/;

七、表单选择器

$(’：input’) 匹配所有的input、textarea、select、button等。。。input的标签
：text 匹配所有的text单行文本框
：password 匹配所有的密码框
：radio
：checkbox
：submit
：image

八、补充一些知识

1、二级菜单
$(‘ul>li’).mouseenter(function(){
$(this).children(‘ul’).show();
});
2、鼠标移入利用透明属性标注
$(‘ul>li’).mouseenter(function(){
$(this).css(‘opacity’, 1).siblings(‘li’).css(‘opacity’, 0.4);
});

九、自定义动画以及创建节点

1、animate(prop, speed, easing, callBack());
prop：必填，格式为
{
top:100,
left:100,
width:100;
height:100,
opacity:0.5透明度

}

speed：速度
easing：linear缓动、swing匀速【默认】；
callback：回调函数
这个动画是没办法改变背景色的，如果要改变，只能用颜色插件
2、清楚队列
比如我们频繁移动在多个li上，子菜单就会有延迟的show和hide，那么这种体验式很差的，我们可以用stop(flag1, flag2)清楚队列来解决；
$(‘ul>li’).mouseenter().stop(flag1, flag2);
flag1：是否清楚事件队列，
flag2：是否跳到最终效果
3、创建节点
创建节点
原生JS:document.write(

)；innerHTML; document.createElement();
jQuery中如何创建节点
html()【等同于innerHTML】, $()【等同于document.createElement()】
【括号中没有内容会获取jQuery对象的内容】
（1） $ (“id”).html(“……”)创建元素，会覆盖掉源标签内容，并且解析，比如超链接
（2） $ ("…….")会创建一个元素，但创建的元素只存在于内存中，如果在页面上显示，就要追加
var $link = $(“ 百度一下”)；

KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).append(

link);
4、克隆节点
clone(flag)节点，存在于内存中,flag为true或false，代表是否会克隆事件，此外利用attr(“id”,”newId”)方法可以修改ID
val()获取值和赋值,attr()属性操作

十、jQuery属性

1、普通属性：id、name、value均可以用attr();
2、$(window).width()，是获取页面可视区的宽度，此外还可以获取高度，scrollLeft()设置/获取元素内容被卷曲出去的宽度；scrollTop()元素内容被卷曲出去的高度
$ (window).scrollLeft()；$(window).scrollTop()；
3、offset()获取元素距离document的位置

十一、自己封装jQuery方法、jQuery插件使用

1、给jQuery原型添加方法-实例方法[$.fn.method = fn]
（1）首先自己创建一个jQuery的js文件
（2）将该js文件引用到代码中去
（3）在js文件中编写自执行函数，并且因为是给jQuery的原型添加方法，所以必须要获取jQuery的原型

    $.fn.bgColor = function(){
        alert("设置背景色");
    }
}(jQuery));

$('#testMyJs').bgColor();
$(this).bgColor();

（4）直接给jQuery添加方法-静态方法

    $.bgColor = function(){
        alert("设置背景色");
    }
}(jQuery));

$.bgColor();

区别是：实例方法jQuery的对象是可以调用的，而静态方法jQuery的对象不能调用，只能由jQuery自己调用；

2、jQuery插件使用
jQuery插件库jq22.com
插件里通常会有使用方法。

总结：

基本知识学完了，暂时还没时间去真正使用，自己的重点主要还是在后端上面，前端基本能看懂会百度就够了，后面会自己再找找前端jQuery的项目练练手。
加油！！！！！有打算一起学习一起进步的小伙伴可以加Q1094369508，一起进步，越努力越幸运！

喝西北风呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习

JQuery 学习记录大家都在说JQuery已经过时了，但是其实还是有很多项目在用jQuery做开发和维护，其实我在学习jQuery的过程中还是感觉有很多好用的地方，就以此文记录一下我的学习jQuery的相关基本知识点吧！一、jQuery基本认识1、jQuery对象是什么jquery对象其实就是一个工具（A），定义了一套标准来操作HTML，这个对象需要我们导入到页面中，不过我们习惯于把利用...
复制链接

扫一扫

专栏目录