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
对
象
)
【
(DOM对象)【
(DOM对象)【=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值”) ④并集选择器,逗号…(“.class值, #id值”),KaTeX parse error: Expected 'EOF', got '#' at position 12: (“.myClass,#̲id1,#id2”) ⑤交集选…(“标签名.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
)
属
性
选
择
器
[
…
…
]
例
如
(“ul>li”), (3)属性选择器 [……] 例如
(“ul>li”),(3)属性选择器[……]例如(“[……]”):选中全部元素中,有这个属性的
选择某属性有特定属性值的标签元素:
例如$(“[class=xxx]”),就是选中class为xxx的标签
$(“[class!=xxx]”)不等于,包含没有class和有class但是值不为xxx的
$(“[class^=x]”)以x开头
(
“
[
c
l
a
s
s
(“[class
(“[class=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
对
象
的
转
化
问
题
,
(“[class*=x]”)class值中有a的元素 (4)过滤选择器,冒号 : (1)基本过滤选择器(从0开始) :first最开头那一个,或者.first() :last最后那一个,或者.last() :even偶数选择器 :odd奇数选择器 注意一个DOM对象和jQuery对象的转化问 题,
(“[class∗=x]”)class值中有a的元素(4)过滤选择器,冒号:(1)基本过滤选择器(从0开始):first最开头那一个,或者.first():last最后那一个,或者.last():even偶数选择器:odd奇数选择器注意一个DOM对象和jQuery对象的转化问题,($(“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
(
…
)
、
(..).css(…)、
(..).css(…)、(…).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(
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,一起进步,越努力越幸运!