JQuery学习

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])classa410first.firstlast.lastevenoddDOMjQuery($(“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(

);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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值