JavaScript JQuery

洪祺

2023-12-01

参考:https://www.cnblogs.com/xcj26/p/3345556.html
https://www.cnblogs.com/yuanchenqi/articles/6070667.html

一.JQuery
1.什么是JQuery

由美国人John Resig创建,至今已吸引了来自世界各地的众多js高手加入其team
jquery是继prototype之后又一个优秀的js框架,宗旨是:
WRITE LESS,DO MORE!
jquery是轻量级的js库,这是其它的js库所不及的;兼容CSS3,还兼容各种浏览器(IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+)
jquery是1个快速,简洁的JS库,使用户能更方便地处理HTML documents/events/实现动画效果,并为网站提供Ajax交互
jquery还有一个优势是:文档说明齐全,各种应用也有详细说明,还有许多成熟的插件供选择

2.引入JQuery:通过< script>标签src属性

<script src='G:\programm\JavaScript/jquery-3.5.0.js'>
</script>

二.JQuery对象
1.JQuery对象

jquery对象是通过jquery包装DOM对象后产生的对象
jquery对象是jquery独有的,如果一个对象是jquery对象,就可以使用jquery的方法,如:$(“#test”).html();
虽然jquery对象是包装DOM对象后产生的,但jquery无法使用DOM对象的任何方法,同理DOM对象也不能使用jquery里的方法,否则会报错
约定:如果获取的是jquery对象,要在变量前加dollar符($)或jQuery

2.基本语法

//基本语法:
$('<selector>').<action>();
jQuery('<selector>').<action>();
//selector可为标签名(即标签类型),ID,class值

$("#test").html();
//获取ID为test的元素内的html代码,其中html()是jquery里的方法 
//这段代码等同于用DOM实现代码:document.getElementById("test").innerHTML; 

$('tag');//创建1个标签jquery对象
$('p')

//将jquery对象转换成dom对象:
$jquery_object[0]

var $variable;//jQuery 对象
var variable;//DOM 对象
$variable[0]

$("#msg").html();
$("#msg")[0].innerHTML;

三.寻找元素(选择器和筛选器)
1.选择器
(1)基本选择器:

$("*"):选择所有标签
$("#id"):根据ID选择标签
$(".class"):根据class值选择标签
$("element"):根据标签名(类型)选择标签
$(".class,p,div"):选择class='inner'的标签和<p><div>

(2)层级选择器:

//后代选择器:
tag1 tag2
$(".outer div");//.outer的<div>后代标签
//子代选择器:
tag1>tag2
$(".outer>div");//.outer的<div>子代标签
//毗邻选择器:
tag1+tag2(只向tag1后找)
$(".outer+div");//.outer的紧靠在后面的同代<div>标签
//同代选择器:
tag1~tag2(只向tag1后找)
$(".outer~div");//.outer的后面的同代<div>标签

(3)基本筛选器:

//基本筛选器:找出tag中满足条件的标签
tag:条件

//第1个标签:tag中的第1个标签
:first
$("li:first");//所有<li>中的第1个
//最后1个标签:tag中的最后1个标签
:last
$("li:last");//所有<li>中的最后1个
//按索引筛选:tag中的第x个(编号从0开始)
:eq(x)
$("li:eq(2)");//所有<li>中的第3个
//第奇数个:tag中的第1,3...个(索引为0,2...)
:even
$("li:even");//所有<li>中的第1,3...个
//第偶数个:tag中的第2,4...个(索引为1,3...)
:odd
$("li:odd");//所有<li>中的第2,4...个
//大于等于某索引:从某索引(含)开始之后所有
:gt(x)
$("li:gt(1)");//从第2个<li>(含)开始所有
//小于等于某索引:从某索引(含)开始之前所有
:lt(x)
$("li:gt(1)");//第2个<li>及之前所有
//根据class值:选取包含指定class值的标签

(4)属性选择器:

"[属性名1='属性值'][属性名2=属性值]..."
//属性可以自定义,如NewType属性

$('[id="div1"]');//ID是div1的标签
$('[alex="sb"][id="div"]');//alex属性是sb,id属性是div的标签

(5)表单选择器:

"[type='x']"
//简写:
"[:'x']"//只适用于input标签

$("[type='text']");//相当于$(":text")

2.筛选器
(1)过滤筛选器:推荐使用

jquery对象.筛选器(参数):效果与对应的基本筛选器相同

$("li").eq(2)
$("li").first()

.hasclass('class'):标签是否包含指定的class值
//返回Boolean
  $("p:first").hasClass("intro")

(2)查找筛选器:

.children('tag'):获取子标签
  $("div").children(".test")//<div>中class为test的子标签
.find('tag'):获取后代标签
  $("div").find(".test")//<div>中class为test的后代标签

.next():获取下一个同级标签
  $(".test").next()
tag.nextAll():获取之后所有同级标签
//不包含tag
  $(".test").nextAll()
tag1.nextUntil('tag2'):之后直到tag为止的所有标签
//不包含tag1,tag2
  $(".test").nextUntil('#end')

.prev():获取上一个同级标签
  $("div").prev()
tag.prevAll():获取之前所有同级标签
//包含tag
  $("div").prevAll()
tag1.prevUntil('tag2'):之前直到tag为止的所有标签
//包含tag1,不包含tag2
  $("div").prevUntil()

.parent():获取父标签
  $(".test").parent()
.parents():获取所有祖先标签
  $(".test").parents()
.parentUntil('tag'):获取直到tag为止的所有祖先标签
//不包含tag
  $(".test").parentUntil('div') 

.siblings():获得所有兄弟标签
  $("div").siblings()

四.操作元素(属性,css,文档处理)
1.属性操作

//属性:
$("tag").attr('attr'[,'value']):获得/修改指定属性的值
//传入1个参数时获得指定属性的值;传入2个参数时修改指定属性的值
//未设置该属性时获得的是undefined
//可用于固有属性和自定义属性
$("tag").removeAttr('attr'):删除指定属性
$("tag").prop('attr'[,'value']):获得/修改指定属性的值
//传入1个参数时获得指定属性的值;传入2个参数时修改指定属性的值
//该属性有值时均返回true,无值返回false
//只能用于固有属性,自定义属性全部返回undefined
$("tag").removeProp('attr'):删除指定属性

//CSS class:
$("tag").addClass('class'):在class中添加指定值
//添加/移除的值不能以点(.)开头
$("tag").removeClass(['class']):移除class中的指定值
//不传入参数时移除所有class值

//HTML代码/文本/值:
$("").html(['value']):获取标签中所有内容并将这部分内容替换为指定内容
//不传入content时不进行修改
$("").text(['value']):获取标签中所有文本内容并将这部分内容替换为指定内容
//不传入content时不进行修改
//content即使传入标签,也当作字符串处理
//获得的标签的子标签中如果还有文本,连该子标签一起覆盖
$("tag").val(['value']):获得/修改标签的value值
//只能用于固有属性中有value的标签(form标签)
//不传入参数时获得,传入1个参数时修改

$("tag").css('key','value'):修改标签的css属性
//可传入{'key1':'value1'...}一次修改多个属性

attr()与prop():

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox,radio,select这样的元素
//选中属性对应'checked'和'selected',这些也属于固有属性,因此:
//需要使用prop方法去操作才能获得正确的结果。
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false
//手动选中的时候attr()获得到没有意义的undefined
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true
    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

2.JQuery对象的遍历/循环:
(1)JS中语法:

<p>000</p>
<p>000</p>
<p>000</p>
<script src='jquery-3.5.0.js'></script>
<script>
    arr=[11,22,33];
    for (var i=0;i<arr.length;i++) {
        $('p').eq(i).html(arr[i]);
    }
</script>

(2)$.each():

$.each(obj,func(x,y) {pass})
//y为jquery_obj中的元素,x为该元素的索引;只传入1个参数时为索引

<p>000</p>
<p>000</p>
<p>000</p>
<script src='jquery-3.5.0.js'></script>
<script>
    arr=[11,22,33];
    $.each(arr,function(x,y) {
        console.log(x)
        console.log(y)
    })
</script>
//结果:
0
11
1
22
2
33;

(3)$().each():

$('tag_obj').each(func() {pass})

<p>000</p>
<p>000</p>
<p>000</p>
<script src='jquery-3.5.0.js'></script>
<script>
    $('p').each(function() {
        console.log($(this))
    })
</script>
//结果:
//得到3个<p>对象

3.文档处理

//创建一个标签对象:
$("<tag>")/$("<tag></tag>")//<>不能去除
  $("<p>")

//内部插入:
$("tag").append("content"):向tag内添加content
//添加在tag的最后
  $("p").append("<b>Hello</b>");
$("content").appendTo("tag"):向tag内添加content
//添加在tag的最后
  $("<b>Hello</b>").appendTo("p");
$("tag").prepend("content"):向tag内添加content
//添加到tag的最前
  $("p").prepend("<b>Hello</b>")
$("content").prependTo("tag"):向tag内添加content
//添加到tag的最前
  $("<b>Hello</b>").prependTo("p");

//外部插入:
$("tag").after("content"):在tag后紧邻的位置插入content
  $("p").after("<b>Hello</b>");
$("tag").before("content"):在tag前紧邻的位置插入content
  $("p").before("<b>Hello</b>");
$("content").insertAfter("tag"):在tag后紧邻的位置插入content
  $("<b>Hello</b>").insertAfter("p");
$("content").insertBefore("tag"):在tag前紧邻的位置插入content
  $("<b>Hello</b>").insertBefore("p");

//替换:
$("tag").replaceWith("content"):将tag替换为content
  $("p").replaceWith("<b>Paragraph</b>");

//删除:
$("tag").empty():清空tag中的内容
$("tag").remove([expr]):删除tag,除了expr匹配的内容
//也会移除被选元素的文本,子节点,数据,事件
//expr:可选;匹配出的内容不会被删除
<p class="hello">Hello</p> how are <p>you</p>
$("p").remove(".hello");
//结果:
//<p class="hello">Hello</p>被留下,how are <p>you</p>被删除

//复制
$("tag").clone([Even,deepEven]):克隆tag并选中这些克隆的副本
//在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用
//参数说明:
Even:可选,位置参数;布尔值;事件处理函数是否会被复制;V1.5以上版本默认为false
deepEven:可选,位置参数;布尔值;事件处理程序和克隆的元素的子元素的数据是否被复制

.clone()注意:

<div class='c1'>
	<p>ppp</p>
</div>
<button>add<button>
<script src='jquery-3.5.0.js'>clone</script>
<script>
	$('button').click(function() {
		var $ele2=$('.c1').clone()
		$('.c1').after($ele2)
	})
</script>
//第1词点击add,复制出1个(共2个);第2次点击,复制出4个(共6个);第3次点击,复制出36个(共42个)...
//但如果是<div>就是总数1->2->4->8...
//对每个.c1,都进行1次复制所有.c1
//通过设置不同的class解决

<!DOCTYPE>
<head>
    <meta charset="UTF-8">
    <title>left_menu</title>
</head>
<body>
    <div class='outer'>
        <div class='item'>
            <button onclick='add(this)'>+</button>
            <input type='text'>
        </div>
    </div>
    <script src='jquery-3.5.0.js'></script>
    <script>
        function add(self) {
        	var $clone_obj=$(self).parent().clone()
            //var $clone_obj=$('.item').clone();
            //会导致多次复制
            $('.outer').append($clone_obj);
        }
    </script>
</body>

4.css操作
(1)修改css属性:

$("tag").css('name'[,value]):获得/修改tag的name属性
//传入1个参数获得属性值;传入2个参数修改属性值
//参数说明
name:css属性名
value:修改后的属性值
  $("div").css('color','red');

(2)位置相关:
scrollTop定位:blog.csdn.net/u010397366/article/details/80674324

$("tag").offset(val,func):获得/设置tag相对于视口的偏移量(top,left)
//视口即浏览器的视图窗口;单位均为px
//不传入参数为获得,传入为设置;设置时设置所有,返回时返回第1个
//参数说明:
val:设置时必选可为字典({top:x,left:y})/键值对/带有top和left属性的对象
func(index,oldoffset):可选;规定返回新偏移量的函数
  //参数说明:
  index:可选;用于接受选择器的index位置
  oldoffset:可选;用于接受选择器的当前坐标
//有2个属性,.top和.left,即上方和左侧的偏移量
  $("tag").offset().top
  $("tag").offset().left
//实例:
  $("div").offset().top;
  $("p").offset({top:5,left:0});

$("tag").position():获得tag中第1个元素相对于第1个已定位的祖先标签的偏移量
//单位均为px
//有2个属性,.top和.left,即上方和左侧的偏移量
//实例:
  $("p").position().left;

$(object).scrollTop(["val"]):获得/设置tag的垂直滚动条位置
//设置时设置所有,返回时返回第1个;当滚动条位于最顶部时,位置是0
//scrollTop获取的值是滚动条产生的那个节点(通常是window/document)的,绑定错误一直为0
//通常与事件监听配合使用,否则只能获得1次,之后不会持续获得
//参数说明:
val:设置时必选;垂直滚动条位置;单位为px
//实例:
  $(window).scrollTop();

$("object").scrollLeft(["val"]):获得/设置tag的水平滚动条位置
//设置时设置所有,返回时返回第1个;当滚动条位于最左侧时,位置是0
 //参数说明:
val:设置时必选;水平滚动条位置;单位为px;正整数

(3)尺寸相关:

$("tag").height(["val"]):获得/设置tag的高度
//设置时设置所有,返回时返回第1个;单位为px;仅为内容高度
//参数说明:
val:设置时必选;tag的高度

val:设置时必选;tag的高度
$("tag").width(["val"]):获得/设置tag的宽度
//设置时设置所有,返回时返回第1个;单位为px;仅为内容高度
//参数说明:
val:设置时必选;tag的宽度

$("tag").innerHeight():获得tag的高度
//返回第1个;包括padding,不包括border

$("tag").innerWidth():获得tag的宽度
//返回第1个;包括padding,不包括border

$("tag").outerHeight([options]):获得tag的高度
//返回第1个;包括padding,border
//参数说明:
options:是否包括margin;默认为false

$("tag").outerWidth([options]):获得tag的宽度
//返回第1个;包括padding,border
//参数说明:
options:是否包括margin;默认为false

五.事件
1.页面载入:

$(<obj>).ready(<func>):当DOM载入就绪时执行func
$(function() {}):相当于$(document).ready(function() {});

2.事件处理:

//简写:
$(<obj>).<event>(function() {})
  //该方式与.bind()完全相同;不可给动态添加的标签绑定事件

$("<tag>").bind("<event>",func):对指定元素进行事件绑定
$("<tag>").on("event",[selector],[data],func):对指定元素进行事件委托
  //2个方法均用于绑定事件处理函数,区别在于.on()也能对动态添加的元素进行绑定
  //.on()是给tag进行绑定,但委托给了selector选定的元素,触发时才找到selector选定的元素
  对tag是否可以动态添加？tag中是否可以包含筛选？
  //自动遍历获得的所有元素,给每个元素绑定事件处理函数
  //参数说明:
	event:事件,如click(点击时)
	selector:筛选出调用.on方法的dom元素的指定子元素
	data:传入func的数据
	func:事件发生时执行的函数

//实例:
$('ul').on('click','li',function() {
    console.log('click');
});//给<ul>下的<li>绑定click事件

//data参数的调用:
function myHandler(event) {
    alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler);

3.解除绑定:

$("tag").unbind("event"):给指定标签解除指定事件的绑定

4.on()与.bind():

//.on()为也能为动态添加的元素绑上指定事件,如:
$('ul li').bind('click',function() {
    console.log('click');
});
//通过js给<ul>添加1个<li>:
$('ul').append('<li>js new li<li>');
//这个新加的<li>不会被绑定上click事件

//但是用:
$('ul').on('click','li',function() {
    console.log('click');
};//方式绑定,然后动态添加<li>:
$('ul').append('<li>js new li<li>');
//这个新的<li>被绑定上了click事件

六.动画效果
1.显示隐藏

.show([time,calback]):用指定时间显示指定对象
.hide([time,calback]):用指定时间隐藏指定对象
.toggle([time]):用指定时间切换状态
//隐藏-->显示,显示-->隐藏
//参数说明:
time:指定效果用时(控制进行的快慢,非指定时长后突然发生);单位为ms
calback:见 六.4.回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
		$(document).ready(function() {
		    $("#hide").click(function () {
		        $("p").hide(1000);
		    });
		    $("#show").click(function () {
		        $("p").show(1000);
		    });
		    //用于切换被选元素的hide与show状态:
		    $("#toggle").click(function () {
		        $("p").toggle();
		    });
		})
    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
</body>
</html>

2.滑动

.slideDown([time,calback]):用指定时间滑动显示指定对象
.slideUp([time,calback]):用指定时间滑动隐藏指定对象
.slideToggle([time]):用指定时间通过滑动切换显示/隐藏状态
//隐藏-->显示,显示-->隐藏
//参数说明:
time:指定效果用时(控制进行的快慢,非指定时长后突然发生);单位为ms
calback:见 六.4.回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
	    $(document).ready(function(){
	        $("#slideDown").click(function(){
	             $("#content").slideDown(1000);
	        });
	        $("#slideUp").click(function(){
	            $("#content").slideUp(1000);
	        });
	        $("#slideToggle").click(function(){
	            $("#content").slideToggle(1000);
	        })
	    });
    </script>
    <style>
        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>
    <div id="content">helloworld</div>
</body>
</html>

3.淡入淡出

.fadeIn([time,calback]):用指定时间淡入
.fadeOut([time,calback]):用指定时间淡出
.fadeToggle([time]):用指定时间通过淡入淡出切换显示/隐藏状态
.fadeTo([time,transparency]):用指定事件修改到指定透明度
//实质是逐渐修改透明度
//参数说明:
time:指定效果用时(控制进行的快慢,非指定时长后突然发生);单位为ms
transparency:控制透明度;范围为[0(完全透明),1(完全不透明)]
calback:见 六.4.回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
	    $(document).ready(function(){
	        $("#in").click(function(){
	            $("#id1").fadeIn(1000);
	        });
		    $("#out").click(function(){
		        $("#id1").fadeOut(1000);
		    });
		    $("#toggle").click(function(){
		        $("#id1").fadeToggle(1000);
		    });
		    $("#fadeto").click(function(){
		        $("#id1").fadeTo(1000,0.4);
		    });
	    });
    </script>
</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>
      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>

4.回调函数:在绑定的方法完成后执行的函数

可用于show/hide/slideDown/slideUp/fadeIn/fadeOut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
</head>
<body>
    <button>hide</button>
    <p>helloworld helloworld helloworld</p>
    <script>
        $("button").click(function(){
            $("p").hide(1000,function(){
                alert($(this).html());
            })
        })
    </script>
</body>
</html>

七.扩展方法(插件机制)
1.用JQuery写插件时,最核心的方两个方法

$.extend(name:function)() {}):为JQuery添加一个静态方法
$.fn.extend(name:function() {}):为JQuery实例添加一个方法
//1次添加多个方法时用.extend({name1:function() {}...})

//调用依次为:
$.name();
$("tag").name();

<p>111</p>
<p>222</p>
<p>333</p>
<script>
	$.extend({
		min: function(a, b) { return a < b ? a : b; },
		max: function(a, b) { return a > b ? a : b; }
	});
	console.log($.min(3,4));
//
	$.fn.extend({
	    "print":function(){
	        for (var i=0;i<this.length;i++){
	            console.log($(this)[i].innerHTML)
	            //this是个js对象
	        }
	    }
	});
	$("p").print();
</script>

2.定义作用域

定义一个JQuery插件,首先要为这个插件定义私有作用域:外部的代码不能直接访问插件内部的代码,插件内部的代码不污染全局变量;在一定程度上上解耦了插件与运行环境的依赖

(function ($) { pass })(jQuery);
//相当于
var fn = function ($) { pass };
fn(jQuery);

//实例:
(function(a,b) {return a+b})(3,5)

3.默认参数

定义了jQuery插件之后,如果希望某些参数具有默认值,可以以这种方式来指定

//step01:定义JQuery的作用域
(function ($) {
    //step03-a:插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a:在插件里定义方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }
    //step02:插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b:合并用户自定义属性，默认属性
        var options = $.extend(defaults, options);
        //step4:支持JQuery选择器
        //step5:支持链式调用
        return this.each(function () {
            //step06-b:在插件里定义方法
            showLink(this);
        });
    }
})(jQuery);

八.JQuery与Ajax

$("<form>").serialize():通过序列化表单值创建URL编码的str
  //URL编码是1种浏览器用来打包表单输入的格式
  //直接应用于表单的结果是得到所有表单中的输入值构成的字典
  //参数说明:
    form:表单标签

//实例:
$("button").click(function(){
    $("div").$("form").serialize();
});

JavaScript JQuery

WRITE LESS,DO MORE!

相关阅读

相关文章

相关问答