33、jQuery介绍

原创

hyjy2504164765 2022-10-10 12:23:30 博主文章分类：Python ©著作权

文章标签 html jquery ide 文章分类 运维

©著作权归作者所有：来自51CTO博客作者hyjy2504164765的原创作品，请联系作者获取转载授权，否则将追究法律责任

33.1、jQuery是什么：

（1）jQuery由John Resig创建，至今已吸引了来自世界各地的众多 javascript 高手加入其team。

（2）jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是—WRITE LESS,DO MORE！

（3）它是轻量级的js库，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器。

（4）jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，

并且方便地为网站提供AJAX交互。

（5）jQuery还有一个比较大的优势，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

（6）下载jQuery的地址为：http://www.jq22.com/jquery-info122

33、jQuery介绍_jquery

33.2、什么是jQuery对象：

（1）简介：

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，

那么它就可以使用 jQuery 里的方法，例如：$(“#test”).html();。

（2）示例：

$("#test").html();

意思是指：获取ID为test的元素内的html代码，其中html()是jQuery里的方法。

这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;。

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，乱使用会报错。

约定：如果获取的是 jQuery 对象，那么要在变量前面加上"$"。

var $variable //jQuery 对象

var variable //DOM 对象

$("#msg").html(); ===》 $("#msg")[0].innerHTML; //jquery对象转为dom对象。

var v = document.getElementById("v"); ===》 var $v = $(v); //DOM对象转jquery对象。

（3）jquery的基础语法：

$(selector).action();

33.3、使用jQuery寻找元素(选择器和筛选器)：

（1）选择器：

1）基本选择器：

$("*"); $("#id"); $(".class"); $("element"); $(".class,p,div");

$("p.intro"); //选取所有 class="intro" 的 <p> 元素

$("p#demo"); //选取所有 id="demo" 的 <p> 元素

2）层级选择器：

$(".outer div"); $(".outer>div"); $(".outer+div");

后代、子代、毗邻

3）基本筛选器：

$("li:first"); $("li:eq(2)"); $("li:even"); $("li:gt(1)");

:even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6），index 值从 0 开始，:odd表示从奇数开始。

:gt 选择器选取 index 值高于指定数的元素，index 值从 0 开始。

4）属性选择器：

$("[href]"); //选取所有带有 href 属性的元素。

$("[href='#']"); //选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']"); //选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']"); //选取所有 href 值以 ".jpg" 结尾的元素。

5）表单选择器：

$("[type='button']");------>$("input:button");------>$(":button");

//注意：只适用于input标签

（2）实例之左侧菜单：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.menu{

height: 500px;

width: 30%;

background-color: gainsboro;

float: left;

}

.content{

height: 500px;

width: 70%;

background-color: rebeccapurple;

float: left;

}

.title{

line-height: 50px;

background-color: #425a66;

color: forestgreen;}

.hide{

display: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

$(".item .title").click(function () {

$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

})

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_html_02

（3）实例之tab切换：

1）代码：

<!DOCTYPE html>

<head>

<style>

margin: 0px;

padding: 0px;

}

.tab_outer{

margin: 0px auto;

width: 60%;

}

.menu{

background-color: #cccccc;

/*border: 1px solid red;*/

line-height: 40px;

}

.menu li{

display: inline-block;

}

.content{

background-color: tan;

border: 1px solid green;

height: 300px;

}

.hide{

display: none;

}

.current{

background-color: darkgray;

color: yellow;

border-top: solid 2px rebeccapurple;

}

</style>

</head>

<body>

</ul>

</div>

function tab(self){

var index=$(self).attr("xxx");

$("#"+index).removeClass("hide").siblings().addClass("hide");

$(self).addClass("current").siblings().removeClass("current");

}

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_ide_03

（4）筛选器：

1）过滤筛选器：

$("li").eq(2); $("li").first(); $("ul li").hasclass("test");

//hasClass() 方法检查被选元素是否包含指定的 class。

2）查找筛选器：

A、$("div").children(".test"); $("div").find(".test");

//.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

B、$(".test").next(); $(".test").nextAll(); $(".test").nextUntil("stop");

//next() 返回被选元素的后一个同级元素

//nextAll() 返回被选元素之后的所有同级元素

//$(selector).nextUntil(stop); 返回 selector 与 stop 之间的每个元素之后的所有同级元素。

C、$("div").prev(); $("div").prevAll(); $("div").prevUntil("stop");

D、$(".test").parent(); $(".test").parents(); $(".test").parentUntil("stop");

E、$("div").siblings();

//siblings() 方法返回被选元素的所有同级元素。

33.4、使用jQuery操作元素(属性，css，文档处理)：

（1）属性操作：

1）属性：

$(selector).attr(attribute); //获取第一个被选元素的属性值

$(selector).attr(attribute,value); //设置被选元素的属性和值

$(selector).removeAttr(attribute); //删除被选元素的属性

$(selector).prop(attribute); //获取第一个被选元素的属性值

$(selector).prop(attribute,value); //设置被选元素的属性和值

$(selector).removeProp(attribute); //删除被选元素的属性

$(selector).val(); //获取第一个被选元素的value属性值 ===> $(selector).attr("value");

$(selector).val(value); //设置被选元素的value属性值 ===> $(selector).attr("value",value);

2）CSS类：

$(selector).addClass(class); //添加被选元素的类属性

$(selector).removeClass(class); //移除被选元素的类属性

3）HTML代码/文本/值：

$(selector).html(); //获取第一个被选元素的内容

$(selector).html(content); //覆盖被选元素的内容

$(selector).text(); //获取第一个被选元素的文本内容

$(selector).text(content); //覆盖被选元素的内容为文本

4）css选择器：

$("p").css("background-color","red"); //所有 p 元素的背景颜色更改为红色。

5）示例：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<a>www.wangyi.com</a>

</div>

<a>www.wangyi.com</a>

</div>

console.log($(".lc").attr("value"));

//获取属性值 1111

console.log($(".lc").attr("value","2222"));

//添加属性 <input type="button" class="lc" value="2222">

console.log($(".lc").val()); //===> console.log($(".lc").attr("value"));

//2222

console.log($(".lc1").html());

//获取标签中的所有内容

//<a>www.wangyi.com</a>

//<p>lc1</p>

console.log($(".lc1").html("<p>lc1-2</p>"));

//替换标签中的内容

//<div class="lc1">

// <p>lc1-2</p>

//</div>

console.log($(".lc2").text());

//获取标签中的所有文本

//www.wangyi.com

//lc2-1

console.log($(".lc2").text("<p>lc2-2</p>"));

//替换标签中的内容为文本

//<div class="lc2"><p>lc2-2</p></div>

</script>

</body>

</html>

（2）attr和prop注意点：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

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

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

对于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>

</body>

</html>

（3）实例之全反选：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

function selectall(){

$("table :checkbox").prop("checked",true);

}

function cancel(){

$("table :checkbox").prop("checked",false);

}

function reverse(){

$("table :checkbox").each(function(){

$(this).prop("checked",!$(this).prop("checked"));

});

}

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_jquery_04

（4）实例之模态对话框：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

.back{

background-color: white;

height: 2000px;

}

.shade{

position: fixed;

top: 0;

bottom: 0;

left:0;

right: 0;

background-color: gray;

opacity: 0.4;

}

.hide{

display: none;

}

.models{

position: fixed;

top: 50%;

left: 50%;

margin-left: -100px;

margin-top: -100px;

height: 200px;

width: 200px;

background-color: white;

}

</style>

</head>

<body>

</div>

</div>

function show(self){

$(self).parent().siblings().removeClass("hide");

}

function cancle(self){

$(self).parent().addClass("hide").prev().addClass("hide")

}

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_html_05

（5）文档处理：

1）用法：

A、创建一个标签对象：

$("<p>")

B、内部插入：

$(selector).append(content)； //$("p").append("<b>Hello</b>");，在被选元素内部的结尾插入指定内容。

$(content).appendTo(selector)； //$("<b>Hello</b>").appendTo("#foo");，和上面的写法相反。

$(selector).prepend(content)； //$("p").prepend("<b>Hello</b>");，在被选元素内部的前面插入指定内容。

$(content).prependTo(selector)； //$("<b>Hello</b>").prependTo("#foo");，和上面的写法相反。

C、外部插入：

$(selector).after(content); //$("p").after("<b>Hello</b>");，在被选元素同级的结尾插入指定内容。

$(content).insertAfter(selector); //$("<b>Hello</b>").insertAfter("#foo");，和上面的写法相反。

$(selector).before(content); //$("p").before("<b>Hello</b>");，在被选元素同级的前面插入指定内容。

$(content).insertBefore(selector); //$("<b>Hello</b>").insertBefore("p");，和上面的写法相反。

D、替换：

$(selector).replaceWith(content) //$("p").replaceWith("<b>Paragraph.</b>");，将被选元素内部替换为指定内容。

E、删除：

$(selector).empty(); //$("p").empty();，删除被选元素内的所有内容。

$(selector).remove(); //$("p").remove();，删除被选元素和被选元素内的所有所有内容。

F、复制：

$(selector).clone();

//clone() 方法生成被选元素的副本，包含子节点、文本和属性。

//true 规定需复制事件处理程序，false 默认，规定不复制事件处理程序。

2）实例之复制样式条：

A、代码：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</div>

function add(self){

//注意：var $clone_obj=$(".outer .item").clone(); 会一变二,二变四的增加

var $clone_obj=$(self).parent().clone();

$clone_obj.children(":button").val('-').attr("onclick","removed(this)");

$(self).parent().parent().append($clone_obj);

}

function removed(self){

$(self).parent().remove()

}

</script>

</body>

</html>

B、效果图：

33、jQuery介绍_jquery_06

（6）css操作：

1）用法：

A、CSS：

$(selector).css(propertyname); //返回第一个被选元素的 CSS 属性的值

$(selector).css(propertyname,value); //设置被选元素的 CSS 属性

B、位置：

$(selector).offset(); //返回第一个被选元素相对于文档的偏移坐标

$(selector).offset(value); //设置被选元素相对于文档的偏移坐标

$(selector).position(); //返回第一个被选元素的位置（相对于它的父元素）

$(selector).scrollTop(); //返回第一个被选元素的滚动条的垂直位置

$(selector).scrollTop(value); //设置被选元素的滚动条的垂直位置

$(selector).scrollLeft(); //返回第一个被选元素的滚动条的水平位置

$(selector).scrollLeft(value); //设置被选元素的滚动条的水平位置

C、尺寸：

$(selector).height(); //返回第一个被选元素的高度

$(selector).height(value); //设置被选元素的高度

$(selector).width(); //返回第一个被选元素的宽度

$(selector).width(value); //设置被选元素的宽度

$(selector).innerHeight();

//返回第一个被选元素的内部高度，该方法包含 padding，但不包含 border 和 margin。

33、jQuery介绍_html_07

$(selector).innerWidth();

//返回第一个被选元素的内部宽度，该方法包含 padding，但不包含 border 和 margin。

33、jQuery介绍_ide_08

$(selector).outerHeight();

//返回第一个被选元素的外部高度，该方法包含 padding 和 border，如需包含 margin，请使用 outerHeight(true)。

33、jQuery介绍_html_09

$(selector).outerWidth([options]);

//返回第一个被选元素的外部宽度，该方法包含 padding 和 border，如需包含 margin，请使用 outerHeight(true)。

33、jQuery介绍_jquery_10

2）实例之返回顶部：

A、代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body{

margin: 0px;

}

.returnTop {

height: 60px;

width: 100px;

background-color: darkgray;

position: fixed;

right: 0;

bottom: 0;

color: greenyellow;

line-height: 60px;

text-align: center;

}

.div2{

background-color: darkcyan;

}

.div3{

background-color: aqua;

}

.div{

height: 1000px;

}

.hide{

display: none;

}

</style>

</head>

<body>

window.onscroll=function(){

var current=$(window).scrollTop();

console.log(current);

if (current>800){

$(".returnTop").removeClass("hide")

}

else {

$(".returnTop").addClass("hide")

}

function returnTop(){

//$(".div1").scrollTop(0);

$(window).scrollTop(0)

}

</script>

</body>

</html>

B、效果图：

33、jQuery介绍_jquery_11

33.5、jQuery事件：

（1）用法：

1）页面载入：

ready(fn)

/*当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){}); ===> $(function(){});

2）事件处理：

$(selector).on(eve,[selector],fn);

在被选择元素上绑定一个或多个事件的事件处理函数。

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

$('ul').on('click', 'li', function(){console.log('click');});，就是筛选出ul

下的li给其绑定click事件。

3）[selector]参数的好处：

好处在于.on方法为动态添加的元素也能绑上指定事件，如：

$('ul li').on('click', function(){console.log('click');}); 的绑定方式和

$('ul li').bind('click', function(){console.log('click');}) 一样，通过js

给 ul 添加了一个 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事件。

（2）实例之面板拖动：

<!DOCTYPE html>

<html>

</head>

<body>

标题

</div>

内容

</div>

$(function(){

// 页面加载完成之后自动执行

$('#title').mouseover(function(){

$(this).css('cursor','move');

}).mousedown(function(e){

//console.log($(this).offset());

var _event = e || window.event;

// 原始鼠标横纵坐标位置

var ord_x = _event.clientX;

var ord_y = _event.clientY;

var parent_left = $(this).parent().offset().left;

var parent_top = $(this).parent().offset().top;

$(this).bind('mousemove', function(e){

var _new_event = e || window.event;

var new_x = _new_event.clientX;

var new_y = _new_event.clientY;

var x = parent_left + (new_x - ord_x);

var y = parent_top + (new_y - ord_y);

$(this).parent().css('left',x+'px');

$(this).parent().css('top',y+'px');

})

}).mouseup(function(){

$(this).unbind('mousemove');

});

})

</script>

</body>

</html>

（3）实例之放大镜：

<!DOCTYPE html>

<head>

<title>bigger</title>

<style>

* {

margin: 0;

padding: 0;

}

.outer {

height: 350px;

width: 350px;

border: dashed 5px cornflowerblue;

}

.outer .small_box {

position: relative;

}

.outer .small_box .float {

height: 175px;

width: 175px;

background-color: darkgray;

opacity: 0.4;

fill-opacity: 0.4;

position: absolute;

display: none;

}

.outer .big_box {

height: 400px;

width: 400px;

overflow: hidden;

position: absolute;

left: 360px;

top: 0px;

z-index: 1;

border: 5px solid rebeccapurple;

display: none;

}

.outer .big_box img {

position: absolute;

z-index: 5;

}

</style>

</head>

<body>

</div>

</div>

$(function () {

$(".small_box").mouseover(function () {

$(".float").css("display", "block");

$(".big_box").css("display", "block")

});

$(".small_box").mouseout(function () {

$(".float").css("display", "none");

$(".big_box").css("display", "none")

});

$(".small_box").mousemove(function (e) {

var _event = e || window.event;

var float_width = $(".float").width();

var float_height = $(".float").height();

console.log(float_height, float_width);

var float_height_half = float_height / 2;

var float_width_half = float_width / 2;

console.log(float_height_half, float_width_half);

var small_box_width = $(".small_box").height();

var small_box_height = $(".small_box").width();

//鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理

var mouse_left = _event.clientX - float_width_half;

var mouse_top = _event.clientY - float_height_half;

if (mouse_left < 0) {

mouse_left = 0

} else if (mouse_left > small_box_width - float_width) {

mouse_left = small_box_width - float_width

}

if (mouse_top < 0) {

mouse_top = 0

} else if (mouse_top > small_box_height - float_height) {

mouse_top = small_box_height - float_height

}

$(".float").css("left", mouse_left + "px");

$(".float").css("top", mouse_top + "px")

var percentX = ($(".big_box img").width() - $(".big_box").width()) / (small_box_width - float_width);

var percentY = ($(".big_box img").height() - $(".big_box").height()) / (small_box_height - float_height);

console.log(percentX, percentY)

$(".big_box img").css("left", -percentX * mouse_left + "px")

$(".big_box img").css("top", -percentY * mouse_top + "px")

})

</script>

</body>

</html>

33.6、jQuery动画效果：

（1）实例之显示隐藏：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<p>hello</p>

$("#hide").click(function () {

$("p").hide(1000);

});

$("#show").click(function () {

$("p").show(1000);

});

$("#toggle").click(function () {

$("p").toggle();

});

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_html_12

（2）实例之滑动：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

#content{

text-align: center;

background-color: lightblue;

border:solid 1px red;

display: none;

padding: 50px;

}

</style>

</head>

<body>

<div id="content">helloworld</div>

$("#slideDown").click(function(){

$("#content").slideDown(1000);

});

$("#slideUp").click(function(){

$("#content").slideUp(1000);

});

$("#slideToggle").click(function(){

$("#content").slideToggle(1000);

})

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_jquery_13

（3）实例之淡入淡出：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<button id="toggle">淡入淡出切换</button>

<button id="fadeto">淡入出现自定义透明度</button>

$("#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>

</body>

</html>

2）效果图：

33、jQuery介绍_html_14

（4）实例之回调函数：

1）代码：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<p>hello world</p>

$("button").click(function(){

$("p").hide(1000,function(){

alert($(this).html());

//点击button按钮后，p标签隐藏完成后浏览器再弹出文本框。

});

</script>

</body>

</html>

2）效果图：

33、jQuery介绍_html_15

33.7、jQuery扩展方法(插件机制)：

（1）使用jQuery写插件时，最核心的两个方法：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

//$.extend(object);

//为JQuery 添加一个静态方法。

jQuery.extend({

min:function(a, b) { return a < b ? a : b; },

max:function(a, b) { return a > b ? a : b; }

});

console.log($.min(3,4));

//3

//$.fn.extend(object);

//为JQuery实例添加一个方法。

$.fn.extend({

"print":function(){

for (var i=0;i<$(this).length;i++){

console.log($(this)[i].innerHTML);

}

});

$("p").print();

//1 2

</script>

</body>

</html>

33.8、jquery循环的两种方式：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<ul>

</ul>

//方式一

var $li=[10,20,30,40];

dic={name:"lc",sex:"male"};

$.each($li,function(i,x){

console.log(i,x)

});

输出结果：

0 10

1 20

2 30

3 40

//方式二

$("ul li").each(function(i,x){

console.log(i,x)

console.log($(this).html());

});

输出结果：

0 <li>1</li>

1 <li>2</li>

2 <li>3</li>

</script>

</body>

</html>

33.9、轮播图：

见附件：

上一篇：CentOS-8.4.2105-x86_64

下一篇：ECS实例中的应用偶尔出现丢包现象并且内核日志（dmesg）存在“kernel: nf_conntrack: table full, dropping packet”的报错信息

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯