jQuery简介【黑马web前端】

更新时间:2019年07月26日 10时52分33秒来源:黑马程序员论坛

jQuery简介

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库是一个JavaScript函数库

Html元素选取

Html元素操作

CSS操作

Html事件函数

JavaScript特效和动画

HtmlDom遍历和修改

Ajax

Utilities

向页面添加jQuery库

jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数

<head>

<script type=”text/javascript”  src=”jquery.js”</script>

</head>

在html5中不用添加type=”text/javascript”，因为javaScript 是html5以及现代所有的浏览器的默认脚本语言

实例：

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

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

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

安装下载
有两个版本可供选择：

production version,实际网站中，已被精简和压缩
Development version，用于测试和开发，未被压缩，是可读代码
另一种选择方法：（库的替代）

不自己的计算机上存放jQuery库，从Google或Microsoft加载CDN  jQuery核心文件

使用Google的CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用Microsoft大的CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
jQuery语法：
$(selector).action()

美元符号定义jQuery()
选择符（selector）“查询“和”查找”html元素
Jquery的action()执行对元素的操作

jQuery语法实例

$(this).hide()

隐藏当前的Html元素。

$(“#test”).hide()

隐藏id=”test“的元素

$(“p”).hide()

隐藏所有的<p>元素

$(“.test”).hide()

隐藏所有的class=”test”的元素

文档就绪函数

$(document).ready(function(){

});

为防止文档在完全加载（就绪）之前运行jQuery代码

jQuery效果
1.隐藏和显示
hide()、show()使用实例

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

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

  });

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

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

  });

});

</script>

</head>

<body>

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

<button id="show" type="button">展示</button>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

2.淡入淡出
fadeIn() ,用于淡入已隐藏的元素

fadeout()，用于淡出可见元素

fadeToggle()，在fadeIn()和fadeout()之间切换

fadeTo()，允许渐变为给定的不透明度（值在0和1之间）

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

  });

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeIn() 方法。</p>

<button>点击这里，使三个矩形淡入</button>

<br><br>

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

<br>

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

<br>

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

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

  });

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里，使三个矩形淡入淡出</button>

<br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

</body>

</html>

3.jQuery滑动
$(selector).slideDown(speed,callback);
可选的Speed参数规定效果时长，可以取“slow”、”fast”、毫秒

可选的callback参数是滑动完成后的所执行的函数名称。

slideDown() :向下滑动元素

slideUp()：向上滑动元素

slideToggle()：向上、向下的切换

动画
Animate()创建自定义动画

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

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

$("div").animate({left:'250px'},4000); //距离左侧250px，移动时间4s

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script>

$(document).ready(function(){

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

$("div").animate({

   left:'250px',    //距离左侧250像素

   opacity:'0.5', //透明度0.5

   height:'150px',  //高度

   width:'150px' //宽度

});

  });

});

</script>

</head>

<body>

<button>开始动画</button>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div>

</body>

</html>

jQuery停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

Callback函数
在当前动画100%完成之后执行的。

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

$(document).ready(function(){

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

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

alert("The paragraph is now hidden");

});

  });

});

Chaining方法
可以把动作/方法链接起来

Chaining允许我们在一条语句中允许多个jQuery方法（在相同的元素上）

$(document).ready(function()

  {

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

$("#p1").css("color","green")

   .slideUp(2000)    //注意前面有个.

   .slideDown(2000);

  });

});

JQuery HTML
jQuery获取
jQuery DOM操作

DOM=Document Object Model(文档对象模型)

获得内容-text（）、html()、val（）

Text() 设置或返回所选元素的文本内容

Html() 设置或返回所选元素的内容（包括HTML标记）

Val() 设置或返回表单字段的值（获取输入字段的值）

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

alert("Text: " + $("#test").text());

  });

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

alert("HTML: " + $("#test").html());

  });

});

</script>

</head>

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

alert("Value: " + $("#test").val()+$("#passw").val());

  });

});

</script>

</head>

<body>

<p>姓名：<input type="text" id="test" value=" "></p>

<p>密码：<input type="password" id="passw" value=""></p>

<button>显示值</button>

</body>

</html>

获取属性-attr()

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

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

alert($("#w3s").attr("href"));

  });

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

</body>

</html>

添加新的html内容

append() 在被选元素的结尾插入内容

prepend() 在被选元素的开头插入内容

after（）在被选元素之后插入内容

before（）在被选元素之前插入内容

$(document).ready(function(){

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

$("p").append(" <b>Appended text</b>.");//在文章的最后添加

  });

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

$("ol").append("<li>Appended item</li>");//在罗列的条目里添加

  });

});

删除元素
remove()—删除被选元素（及其子元素）

empty() –从被选元素中删除子元素

$("#div1").remove();
$(document).ready(function(){

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

$("#div1").empty();

  });

});

获取并设置CSS类

addclass() 向被选元素中添加一个或者多个类
removeclass() 向被选元素中删除一个或者多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
4.css() 设置或返回样式属性。

<script>

$(document).ready(function(){

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

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

  });

});

</script>

<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

jQuery简介【黑马web前端】

相关阅读