1.概念
1.1基础知识
jQuery是一个兼容多浏览器的JavaScript库，封装了开发过程中常用的一些功能，类似Python模块
jQuery就是用JS写的，JS是基础
jQuery写起来简单，开发效率高，兼容性好
1.2相关链接
官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
注意：官网里面有两个版本，一个是压缩版，供生产环境使用，一个是没有压缩的，供开发使用
你进去把它复制下来，放到一个以js结尾的文件就能使用了（如jquery-3.3.1.js）
1.3使用步骤
引入包 <script type="text/javascript" src="jquery-3.3.1.js"></script>
定义入口函数 $(document).ready(function(){ ---})
事件处理 oBtn.click(function(){---})
简单使用:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????????margin-top: 20px; ???????????display: none; ???????} ???</style> ???</head><body> ???<!-- 引入js --> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(document).ready(function(){ ???????????// 根据标签名获取dom元素 ???????????var oBtn = $(‘button‘); ???????????var oDiv = $(‘div‘); ???????????oBtn.click(function(){ ???????????????// 显示盒子，可以添加显示的时间，2s渐变的显示出来效果 ???????????????oDiv.show(2000); ???????????????// 设置内容 ???????????????oDiv.html(‘666‘); ???????????????// oDiv.show(1000).html(‘666‘); ???????????}); ???????}) ???</script> ???<button>操作</button> ???<div></div> ???<div></div> ???<div></div> ???</body></html>1.4jQuery的入口函数和$符号
入口函数：
原生js入口函数：只能出现一次，出现多次会存在事件覆盖情况
????????//原生 js 的入口函数。页面上所有内容加载完毕，才执行。 ???????//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 ??????window.onload = function () { ??????????alert(1); ??????} ???jQuery入口函数：可以出现任意次，不会发生覆盖
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 ??????$(document).ready(function () { ??????????alert(1); ??????})或者
?//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 ??????$(window).ready(function () { ??????????alert(1); ??????})$符：
jQuery使用$符是因为它的书写简单，在打印的时候，会发现他两其实结果一样，它实际上表示的是一个函数名
???$(); // 调用上面我们自定义的函数$ ???$(document）.ready(function(){}); // 调用入口函数 ???$(function(){}); // 调用入口函数 ???$(“div”) // 获取所有的div标签元素1.5js中DOM对象和jQuery对象比较
div结构
???????<div id="app"></div> ???????<div class="box"></div> ???????<div class="box"></div> ???????<div></div> ??
原生js获取这些元素节点
???<script type="text/javascript"> ???????var myBox = document.getElementById("app"); ??????????//通过 id 获取单个元素 ???????console.log(myBox); ???????var boxArr = document.getElementsByClassName("box"); ?//通过 class 获取的是伪数组 ???????console.log(boxArr); ???????var divArr = document.getElementsByTagName("div"); ???//通过标签获取的是伪数组 ???????console.log(divArr); ???</script> 效果：
通过jQuery获取这些元素节点（都是数组）：
???<script type="text/javascript"> ???????//注意书写方式，必须有$符 ???????console.log($(‘#app‘)); ???????console.log($(‘.box‘)); ???????console.log($(‘div‘)); ???</script> ???
效果：
jQuery自带了css（）方法可以直接在代码中给div设置css属性
$(‘div‘).css({ ???????????????‘width‘: ‘200px‘, ???????????????‘height‘: ‘200px‘, ???????????????"background-color":‘red‘, ???????????????‘margin-top‘:‘20px‘ ???????????})1.6jQuery和DOM对象之间的转换
jQuery对象是包装DOM对象后产生的，但是两者却不能混用，DOM对象才能使用DOM方法，jQuery对象才能使用jQuery方法
DOM对象转换为jQuery对象（默认已经导入库）
<body> ?????<input type="text" name="username" id="username" value="王老师" ?/> ?????<script> ?????????//获取DOM对象 ?????????var username=document.getElementById("username"); ?????????alert(username.value); ???????????????????//转换为jquery对象 转换后就可以使用jQuery中的方法了 ?????????var $username=$(username); ?????????alert("^^^"+$username.val()); ?????</script> ???????</body> ?jQuery对象转换为DOM对象
<body> ?????<input type="text" name="username" id="username" value="小王老师" /> ?????<script> ?????????//获取jQuery对象 ?????????var $username=$("#username"); ?????????alert($username.val()); ???????????????????//转换成DOM对象 ?????????//(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象 ?????????var username=$username[0]; ?????????alert(username.value); ???????????????????//jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 ?????????//转化为DOM对象 ?????????var username1 = $username.get(0); ?????????alert(username1.value); ?????</script> ?</body> ?下面看看例子
利用jQuery实现隔行换色：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<ul style="list-style: none;"> ???????<li>1</li> ???????<li>2</li> ???????<li>3</li> ???????<li>4</li> ???</ul></head><body> ???<script src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????//调用入口函数 ???????$(document).ready(function(){ ???????????//声明变量 ???????????????var lis = $(‘li‘); ???????????????for(var i=0;i<lis.length;i++){ ???????????????????if(i%2===0){lis[i].style.backgroundColor = "green";} ???????????????????else {lis[i].style.backgroundColor = "yellow";}}}) ???</script> ???</body></html>利用jQuery实现开关一键换色
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>开关</title> ???<style> ???????.c1{ ???????????width: 200px; ???????????height: 200px; ???????????border :1px solid grey; ???????????border-radius: 50%; ???????????margin-top: 50px; ???????????margin: 0 auto; ???????????????????} ???????.c2 { ???????????background-color: yellow; ???????} ???</style></head><body> ???<div class="c1"></div> ???<button class="btn" style="margin-left: 50%;">点击我</button> ???<script src="jquery-3.3.1.js"></script> ???<script> ???// ???找到button添加事件 ???????$(".btn").on(‘click‘,function () { ???????????//当点击的时候让变色 ???????????$(".c1").toggleClass(‘c2‘) ????????}); ???</script></body></html>下面来看看海燕整理的作业题:
35.前端之jQuery基本语法
原文地址：https://www.cnblogs.com/LearningOnline/p/9126426.html