1.jQuery基础
jQuery作为一个js函数库，提供大量的扩展，方法快捷
1.1 安装使用
两种方法：1.官网下载 2.使用CDN网页链接
1.jQuery官网下载版本，有压缩和未压缩版的都可以
下载后放入网页的同一目录下，就可以使用调用jQuery
<head> <script src = "jquery-3.6.0.min.js"></script> </head>
2.使用CDN(内容发布网路)引用，如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
//Staticfile CDN <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> //百度 CDN <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> //又拍云 CDN <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> //新浪 CDN <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> //google CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> //Microsoft CDN <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">
1.2 语法
通常使用( 美元符号 ) 来表示 j Q u e r y 基础语法：模型： (美元符号)来表示jQuery 基础语法：模型：(美元符号)来表示jQuery基础语法：模型：(selector).action()
示例：
$(this).hide()-隐藏当前元素 $("p").hide()-隐藏所有<p>元素 $("p.test").hide()-隐藏所有class="test"的<p>元素 $("#test").hide() - 隐藏id="test"元素
文档就绪事件：
所有jQuery函数位于一个document ready函数中：防止文档在完全加载之前运行jQuery代码，即在DOM加载完成后才可以对DOM进行操作
$(document).ready(function(){ //开始写jQuery代码 }); //简洁写法 $(function(){ //开始写jQuery代码.. })
1.3 选择器
1.基本选择器 $<"p"> 元素选择器 $("#test") #id选择器 $(".test") .class选择器 $("h1,div,p") 组合选择器 2.层次选择器 $("#id>.classname") //子元素选择器 $("#id.classname") //后代元素选择器 $("#id + .classname") //紧邻下一个元素选择器 $("#id ~ .classname") //兄弟元素选择器 3.过滤选择器(重点) $("li:first") //第一个li $("li:last") //最后一个li $("list:even") //挑选下表为偶数的li $("list:odd") //挑选下标为奇数的li $("li:eq(4)") //下标等于4的li(第五个元素) $("li:not(#runoob)") //挑选除 id="runoob"以外的所有li 3.2内容过滤 $("dic:contains("Runob")") //包含Runob文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(selector)") //含有选择器所匹配的元素 $("td:parent") //包含子元素或者文本的元素 3.3可见性过滤选择器 $("li:hidden") //匹配所有不可见元素，或type为hidden的元素 $("li:visible") //匹配所有可见元素 3.4属性过滤选择器 $("div[id]") //所有含有id属性的div $("div[id='123']") //id属性值为123的div元素 $("div[id^='qq']") //id属性值以qq开头的div元素 $("div[id$='zz']") //id属性值以zz结尾的div元素 $("div[id*='bb']") //id属性值包含bb的div元素 $("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素 3.5状态过滤选择器 $("input:enabled") //匹配可用的input $("input:disabled") //匹配不可用的input $("inout:checked") //匹配选中的input $("option:selected") //匹配选中的option 3.4表单选择器 $(":input") //匹配所有input元素 $(":text") //匹配所有的单行文本框，$(":text")等价于$("[type=text]") $(":password") //所有密码框 $(":radio") //所有单选框 $(":checkbox") //所有复选框 $(":submit") // 所有提交按钮 $(":reset") //所有重置按钮 $(":button") //所有button按钮 $(":file") //所有文本域 3.5其他 $("*") 选取所有元素 $("p.intro") 选取class为introde的<p>元素 $("ul li:first") 选取第一个<ul>元素的第一个<li>元素 $("div + p") 每个<div>元素相拼的下一个<p>元素 $("div ~ p") <div>元素同级的所有<p>元素 $(":file") 所有带有type="file"的input元素
1.4 事件
[事件大全](https://www.runoob.com/jquery/jquery-ref-events.html) 几个常用的事件方法： bind() 向元素添加事件处理程序 click() 添加出发click事件 focus() 添加出发focus事件 实例：hover()方法 <script> $(document).ready(function(){ $("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); }); }); </script>
样式：放上去黄色，离开粉色
注意：对于由jQuery动态生成的元素，不能直接绑定常用的事件，如click，因为这些元素属于动态生成，使用live和on事件方法
例如：$(".box").click(function(){}); 类名为box的元素是由jqery动态生成，以上写法将会无效，那么可以改为如下： $(".box").live("click",funtion(){}); 或者 $(".box").on('click',function(){});
2.jQuery效果
2.1 隐藏|显示
jQuery.hide() 和 jQuery.show() 隐藏和显示
<script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>如果你点击"隐藏"按钮，我将会消失</p> <p>如果你点击"显示"按钮，我将会出现</p> <button id = "hide">隐藏</button> <button id ="show">显示</button> </body>
jQuery toggle() 可以切换hide()和show() 方法
<script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <p>如果你点击"隐藏"按钮，我将会消失</p> <p>如果你点击"显示"按钮，我将会出现</p> <button id = "p">切换</button> </body>
2.2 滑动
jQuery Fading方法包含下面四种fade方法：
jQuery.fadeln() jQuery.fadeOut() jQuery.fadeToggle() jQuery.fadeTo()
以fadeIn()为例： <script src = "jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <p>以下实例演示了fadeIn()使用了不同参数的效果</p> <button>点击淡入div元素</button> <br><br> <div id = "div1" style="width:80px;height:80px;display:none;background-color:#ff0000"></div><br> <div id = "div2" style="width:80px;height:80px;display:none;background-color:green"></div><br> <div id = "div3" style="width:80px;height:80px;display:none;background-color:blue"></div><br> </body> //fadeOut用于淡出可见元素 fadeToggle() 用于fadeIn()和fadeOut()之间方法进行切换 //jQuery fadeTO() 允许渐变为给定的不透明度(值介于0-1之间)
jQuery滑动方法：slideDown() slideUp() slideToggle()三种方法
以slidetoggle()为例： <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/css"> #panel { padding: 50px; display:none; } #panel,#flip { padding:5px; text-align:center; background-color: skyblue; border:solid 1px red; } </style>
2.3 动画
jQuery动画-animate()方法
//单个属性 $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"250px"}); }); }); //多个属性 $(document).ready(function(){ $("button").click(function(){ $("div").animate({ leftL:"250px", opacity:'0.5', height:'150px', width:'150px' }); }); }); //使用相对值 $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', heifht;"+=150px", width:'+=150px' }); }); }); //使用预定义的值 $(ddocument).ready(function(){ $('button').click(function(){ $("div").animate({ height:"toggle" }); }); }); //使用队列功能 $(document).ready(function(){ $("button").click(function(){ var div =$('div'); div.animate({height:'300px',opacity:'0.4'},'slow'); div.animate({width:'300px',opacity:'0.8'},'slow'); div.animate({height:'100px',opacity:'0.4'},'slow'); div.animate({width:'100px',opacity:'0.8'},'slow'); }); });
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}); }); }); </script> </head> <body> <button>开始动画</button> <p>改变位置</p> <div style = "background-color: bisque;height: 100px;width:100px;position:absolute;"></div>
多个属性： <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:"0.5", height:'150px', width:'150px' }); }); }); </script>
jQuery stop()方法 停止动画
$("#stop").click(function(){ $("#panel").stop(); });
callback实例：callback是在隐藏效果完全实现后回调函数
$("button").click(funtion(){ $('p').hide('slow',function(){ alert("段落现在被隐藏了"); }); });
jQuery方法链接：允许在相同的元素上运行多条jQuery命令
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
