<script type="text/javascript" src="./jquery.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box" class="wrap">alex</div>
<!-- from xxx import ooo -->
<!-- 1.导入模块 在前端中一个js文件就是一个模块 一个css也可以是一个模块，一个html/png/mp3 -->
<script type="text/javascript" src="./jquery.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script>
//jquery内部的api 99%的都是方法
console.log(jQuery);
//
console.log($(‘#box‘));
// 三步走
// 1、获取事件源 2、事件 3.事件驱动
$(‘#box‘).click(function(){
//千万不要调用js的属性和方法 js调用js的属性和方法 ，jquery对象是调用jquery的对象和方法
// console.log($(‘.wrap‘).style);
// $(‘.wrap‘).css(‘color‘,‘red‘);
$(‘.wrap‘).css({
// ‘background-color‘: ‘yellow‘
‘backgroundColor‘: ‘yellow‘,
width:‘300px‘
});
})
</script>
</body>
</html>
//原生 js 的入口函数。页面上所有内容加载完毕，才执行。 //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 window.onload = function () { alert(1); }
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); })
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(function () { alert(1); });
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); })
$(); // 调用上面我们自定义的函数$ $(document）.ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $(“#btnShow”) // 获取id属性为btnShow的元素 $(“div”) // 获取所有的div标签元素
<div></div> <div id="app"></div> <div class="box"></div> <div class="box"></div> <div></div
var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
//获取的是数组，里面包含着原生 JS 中的DOM对象。 console.log($(‘#app‘)); console.log($(‘.box‘)); console.log($(‘div‘));
$(‘div‘).css({ ‘width‘: ‘200px‘, ‘height‘: ‘200px‘, "background-color":‘red‘, ‘margin-top‘:‘20px‘ })
$(js对象);
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
$(‘div‘)[1].style.backgroundColor = ‘yellow‘;
$(‘div‘)[3].style.backgroundColor = ‘green‘;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
//入口函数
jQuery(function () {
var jqLi = $("li");
for (var i = 0; i < jqLi.length; i++) {
if (i % 2 === 0) {
//jquery对象，转换成了js对象
jqLi[i].style.backgroundColor = "pink";
} else {
jqLi[i].style.backgroundColor = "yellow";
}
}
});
</script>
</head>
<body>
<ul>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
<li>小马哥</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color:red;
/*display: none;*/
}
</style>
</head>
<body>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<button>动画</button>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($(‘button‘));
var isShow = true;
// 内部提升
$(‘button‘).click(function () {
//点击改变长宽
// $(‘#box‘).hide(2000);
// $(‘#box‘).show(2000,function() {
// alert(2222);
// });
// 显示:2秒显示出来
// $(‘#box‘).fadeIn(2000);
// 隐藏:22秒逐渐隐藏起来
// $(‘#box‘).fadeOut(2000);
//上下逐渐展开
// if (isShow) {
// // 用动画 先 stop()再开动画
// $(‘#box‘).stop().slideUp(1000);
// isShow = false;
// }else{
// $(‘#box‘).stop().slideDown(1000);
// isShow = true;
// }
//
//上下逐渐展开关闭
// $(‘#box‘).slideToggle(1000);
// $(‘#box‘).slideDown(3000);
})
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/qicun/p/9719978.html