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
原文地址：https://www.cnblogs.com/qq849784670/p/9720386.html