jQuery入门概念
1:什么是jQuery?
它通过封装原生的 JavaScript 函数得到一整套定义好的方法。
2:jQuery的作用?
1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8.自行扩展功能插件
3:jQuery的优点?
以更少的代码、实现更多的功能
4:jQuery的引入方式?
1:本地引入(外链接)
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
alert(2)
})
})
</script>
2:网址引入
百度:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
又拍云:
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
新浪:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
Google 谷歌
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
alert(2)
})
})
</script>
5.$(function(){})==window.onload :告诉浏览器,先加载html和css,最后加载js代码
6.本地引入和网址引入的区别:
本地引入的优点:
1.加载时速度很快;
2.更加稳定
缺点:
1.会增加项目的体积,本地引入库存或者框架或者插架太多让网站打开速度变慢
网址引入的优缺点:
优点:1.不必担心增加项目的体积
缺点:1.引入有时会不稳定
简单代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border-radius: 100%;
font-size: 30px;
text-align: center;
line-height: 100px;
background: paleturquoise;
}
</style>
</head>
<body>
<div id="box">
小喵
</div>
<button id="btn">点击</button>
</body>
<script src="../jq1/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('#box').css('width','300px').css('height','300px')
$('#box').css('color','pink').css('font-size','40px').css('line-height','300px')
})
})
</script>
</html>