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.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>

<html lang="en">

<head>

<meta charset="UTF-8">

<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 class="outer">

<div class="menu">

<div class="item">

<div class="title">菜单一</div>

<div class="con">

<div>111</div>

<div>111</div>

<div>111</div>

</div>

</div>

<div class="item">

<div class="title">菜单二</div>

<div class="con hide">

<div>111</div>

<div>111</div>

<div>111</div>

</div>

</div>

<div class="item">

<div class="title">菜单二</div>

<div class="con hide">

<div>111</div>

<div>111</div>

<div>111</div>

</div>

</div>

</div>

<div class="content"></div>

</div>

<script src="jquery-3.4.1.js"></script>

<script>

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

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

})

</script>

</body>

</html>

2)效果图:

(3)实例之tab切换:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>tab</title>

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

<div class="tab_outer">

<ul class="menu">

<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>

<li xxx="c2" onclick="tab(this);">菜单二</li>

<li xxx="c3" onclick="tab(this);">菜单三</li>

</ul>

<div class="content">

<div id="c1">内容一</div>

<div id="c2" class="hide">内容二</div>

<div id="c3" class="hide">内容三</div>

</div>

</div>

<script src="jquery-3.4.1.js"></script>

<script>

function tab(self){

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

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

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

}

</script>

</body>

</html>

2)效果图:

(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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<input type="button" class="lc" value="1111"/>

<div class="lc1">

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

<p>lc1-1</p>

</div>

<div class="lc2">

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

<p>lc2-1</p>

</div>

<script src="jquery-3.4.1.js"></script>

<script>

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">&lt;p&gt;lc2-2&lt;/p&gt;</div>

</script>

</body>

</html>

(2)attr和prop注意点:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

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

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

<script src="jquery-3.4.1.js" type="text/javascript"></script>

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

</body>

</html>

(3)实例之全反选:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button onclick="selectall();">全选</button>

<button onclick="cancel();">取消</button>

<button onclick="reverse();">反选</button>

<table border="1">

<tr>

<td><input type="checkbox" name=""></td>

<td>111</td>

</tr>

<tr>

<td><input type="checkbox" name=""></td>

<td>222</td>

</tr>

</table>

<script src="jquery-3.4.1.js"></script>

<script>

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)效果图:

(4)实例之模态对话框:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<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 class="back">

<input id="ID1" type="button" value="click" onclick="show(this)">

</div>

<div class="shade hide"></div>

<div class="models hide">

<input id="ID2" type="button" value="cancel" onclick="cancle(this)">

</div>

<script src="jquery-3.4.1.js"></script>

<script>

function show(self){

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

}

function cancle(self){

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

}

</script>

</body>

</html>

2)效果图:

(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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div class="outer">

<div class="item">

<input type="button" value="+" onclick="add(this);">

<input type="text">

</div>

</div>

<script src="jquery-3.4.1.js"></script>

<script>

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、效果图:

(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。

/*

*/

$(selector).innerWidth();

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

*/

*/

$(selector).outerHeight();

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

/*

*/

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

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

/*

*/

2)实例之返回顶部:

A、代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<div class="div2 div"></div>

<div class="div3 div"></div>

<div class="returnTop hide" onclick="returnTop()">返回顶部</div>

<script src="jquery-3.4.1.js"></script>

<script>

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.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 lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div style="border: 1px solid #ddd;width: 600px;position: absolute;">

<div id="title" style="background-color: black;height: 40px;color: white;">

标题

</div>

<div style="height: 300px;">

内容

</div>

</div>

<script type="text/javascript" src="jquery-3.4.1.js"></script>

<script>

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

<html lang="en">

<head>

<meta charset="UTF-8">

<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 class="outer">

<div class="small_box">

<div class="float"></div>

<img src="small.jpg">

</div>

<div class="big_box">

<img src="big.jpg">

</div>

</div>

<script src="jquery-3.4.1.js"></script>

<script>

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

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<p>hello</p>

<button id="hide">隐藏</button>

<button id="show">显示</button>

<button id="toggle">切换</button>

<script src="jquery-3.4.1.js"></script>

<script>

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

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

});

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

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

});

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

$("p").toggle();

});

</script>

</body>

</html>

2)效果图:

(2)实例之滑动:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#content{

text-align: center;

background-color: lightblue;

border:solid 1px red;

display: none;

padding: 50px;

}

</style>

</head>

<body>

<input type="button" value="滑动出现" id="slideDown"/>

<input type="button" value="滑动隐藏" id="slideUp"/>

<input type="button" value="滑动切换" id="slideToggle"/>

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

<script src="jquery-3.4.1.js"></script>

<script>

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

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

});

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

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

});

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

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

})

</script>

</body>

</html>

2)效果图:

(3)实例之淡入淡出:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button id="in">淡入出现</button>

<button id="out">淡出隐藏</button>

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

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

<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

<script src="jquery-3.4.1.js"></script>

<script>

$("#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)效果图:

(4)实例之回调函数:

1)代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button>隐藏</button>

<p>hello world</p>

<script src="jquery-3.4.1.js"></script>

<script>

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

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

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

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

});

});

</script>

</body>

</html>

2)效果图:

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

(1)使用jQuery写插件时,最核心的两个方法:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<p>1</p>

<p>2</p>

<script src="jquery-3.4.1.js"></script>

<script>

//$.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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<script src="jquery-3.4.1.js"></script>

<script>

//方式一

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

1 <li>​2​</li>​

2

2 <li>​3​</li>​

3

*/

</script>

</body>

</html>

33.9、轮播图:

见附件:

33、jQuery介绍的更多相关文章

  1. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  2. 前端——jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  3. 前端-jQuery介绍

    目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...

  4. Day047--JS BOM介绍, jQuery介绍和使用

    内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法 面向对象的三大特性:封装 继承 多态) 为了可扩展性 DOM操作 标签属性操作 获取值 getAttribute() 设 ...

  5. Python自动化 【第十七篇】:jQuery介绍

    jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...

  6. jquery介绍

    1.jQuery (1)jQuery简介 是一个js框架(.js文件),它的最大特点是,使用选择器( 借鉴了css选择器的语法)查找要操作的节点,并且将这些 节点封装成一个jQuery对象,通过调用j ...

  7. 2.jQuery介绍

    . jQuery的认识 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的css选择器,并且可对CSS选择器进行扩展:拥有便捷的插件扩展机制和丰富的插件. 和原 ...

  8. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  9. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

随机推荐

  1. Docker——Registry搭建私有镜像仓库

    前言 在 Docker 中,当我们执行 docker pull xxx 的时候,它实际上是从 registry.hub.docker.com 这个地址去查找,这就是Docker公司为我们提供的公共仓库 ...

  2. SystemVerilog 编写FSM

    SystemVerilog 编写FSM 题目 SystemVerilog实现 仿真 SystemVerilog 编写FSM 好书: https://github.com/yllinux/blogPic ...

  3. xpath元素定位语法

    举个栗子 -------------------------------------------------------------------------------------- <?xml ...

  4. 在虚拟机中安装 Ubuntu

    https://www.cnblogs.com/huohu121/p/12250869.html 火狐python 博客园 首页 新随笔 联系 订阅 管理 随笔 - 54  文章 - 0  评论 - ...

  5. shell基础之99乘法表

    方法一: 1 #!/bin/bash 2 for a in {1..9};do 3 for b in {1..9};do 4 c=`echo "$a*$b" |bc` 5 if [ ...

  6. Nginx/LVS/HAProxy对比分析

    Nginx/LVS/HAProxy简单介绍: Nginx:专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率 .它支持内核Poll模型,能经受高负载的考验,有报告表明能支持高达 50,000 ...

  7. [论文阅读笔记] LouvainNE Hierarchical Louvain Method for High Quality and Scalable Network Embedding

    [论文阅读笔记] LouvainNE: Hierarchical Louvain Method for High Quality and Scalable Network Embedding 本文结构 ...

  8. python中的时间戳和格式化之间的转换

    import time #把格式化时间转换成时间戳 def str_to_timestamp(str_time=None, format='%Y-%m-%d %H:%M:%S'): if str_ti ...

  9. Python+Selenium学习笔记5 - python官网的tutorial - 交互模式下的操作

    这篇笔记主要是从Python官网的Tutorial上截取下来,再加上个人理解 1. 在交互模式下,下划线'_'还可以表示上一步的计算结果 2.引号转义问题. 从下图总结的规律是,字符串里的引号如果和引 ...

  10. Linux BSP非标准HDMI分辨率

    Linux BSP非标准HDMI分辨率 Intrinsyc公司发布了它的一个新的Linux BSP软件的发布 打开-Q820 开发套件基于Linux内核版本.支持的软件功能包括HDMI输出,可以支持标 ...