1.什么是jQuery
jQuery 全称:javaScript Query是js的一个框架,本质上仍然是js
2.jQuery特点
支持各种主流的浏览器
使用简单
拥有便捷的插件扩展机制和丰富的插件
3.使用JQuery
引入jQuery文件
(1)jQuery的选择器
注意:
jQuery中选择器获取的是存储了HTML元素对象的数组
jQuery获取的元素对象不能够直接使用js的内容,按照数组的取出方式将对象取出后可以使用js的内容
<html> <head> <meta charset="utf-8" /> <title>jQuery选择器</title> <!--引入jQuery文件--> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script> <!--声明js代码域--> <script type="text/javascript"> //id选择器 function testId(){ //jQuery--id var inp=$("#uname"); alert(inp.val()); } //标签选择器 function testEle(){ var inps=$("input"); } //类选择器 function testClass(){ var inps=$(".common"); } //组合选择器 function testAll(){ var eles=$("h3,input"); } //层级选择器 //parent>child:在给定的父元素下匹配所有子元素 //prev+next:匹配所有紧接在prev元素后的next元素 //prev~sibling:匹配prev元素之后的所有sibling元素 function testChild(){ var inps=$("div>input"); }
//简单选择器
//内容选择器
//可见性选择器
//属性选择器
//表单选择器 </script> <style type="text/css"> .common{} #showdiv{ width: 300px; height: 300px; border: solid 2px orange; } </style> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试id" οnclick="testId()" class="common"/> <input type="button" name="" id="" value="测试标签选择器" οnclick="testEle()" /> <input type="button" name="" id="" value="测试类选择器" οnclick="testClass()" /> <input type="button" name="" id="" value="测试组合选择器" οnclick="testAll()" /> <hr/> 用户名:<input type="text" name="uname" id="uname" value="张三" class="common"/> <hr /> <input type="button" name="" id="" value="测试子选择器" οnclick="testChild()" /> <hr /> <div id="showdiv"> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> </body> </html>
(2)jQuery操作元素的属性
获取:
对象名.attr("属性名") //返回当前属性值
注意此中方式不能获取value属性的实时数据,使用对象名.val()进行获取
修改:
对象名.attr("属性名","属性值");
<html> <head> <meta charset="utf-8" /> <title>jquery操作元素属性</title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script> <!--声明js代码域--> <script type="text/javascript"> function testField(){ //获取元素对象 var uname=$("#uname"); //获取 alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val()); } function testFiled2(){ //获取元素对象 var uname=$("#uname"); uname.attr("type","button"); } </script> </head> <body> <h3>jquery操作元素属性</h3> <input type="button" name="" id="" value="测试获取元素属性" οnclick="testField"/> <hr /> 用户名:<input type="text" name="uname" id="uname" value="" /> </body> </html>
(3)jQuery操作元素的样式和内容
(4)jQuery操作元素的文档结构
(5)jQuery中的事件
(6)jQuery中的动画效果
(7)案例