jQuery基础知识1
Posted qq849784670
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery基础知识1相关的知识，希望对你有一定的参考价值。
jquery的概念
js query
jquery库
封装了大量js，封装js的入口函数、兼容性问题、DOM操作、事件、ajax
使用jquery
下载包
引用
<script src="jquery.js"></script>
<script>
//入口函数
$(function(){
//DOM操作三步走：事件源 事件 事件驱动
//选择器 就是来获取事件源的
id
$(‘#box‘)
class
$(‘.box‘)
标签
$(‘div‘)
//事件和事件驱动 在click方法中的函数称为回调函数
$(‘#box‘).click(function(){
//对样式的操作
.css()方法
})
});
</script>
jquery的文件讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div id="box" class="wrap">qing</div> <!--1导入模块，在前端中一个js文件是模块，一个css也可以是一个模块，一个html/png/mp3--> <script type="text/javascript" src="./jquery.js"></script> <script> //jquery内部的aip 99%都是方法 console.log(jQuery) console.log($("#box")) //三步走 $("#box").click(function () { //千万不要用js的属性和方法 js调用js的属性和方法 jquery对象调用的是jquery的对象和方法 $(".wrap").css( { "backgroundColor" :"yellow", width:"300px" } ) }) </script> </body> </html>
jquery的入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
//1.入口函数 不用等待图片资源加载完成之后就可以调用 它没有事件覆盖现象
// $(document).ready(function () {
// //回调函数
// console.log($("#box"))
// })
$(function () {
console.log($("box"))
});
$(function () {
});
</script>
</body>
</html>
jquery的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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(22222);
// })
//显示 淡入淡出
// $("#box").fadeIn(5000);
// $("#box").fadeOut(5000);
if(isShow){
$("#box").stop().slideUp(1000);
isShow = false;
}else {
$("#box").stop().slideDown(1000);
isShow = true;
}
})
})
</script>
</body>
</html>
以上是关于jQuery基础知识1的主要内容，如果未能解决你的问题，请参考以下文章