目录
一、jQuery中"$"的概念
1.是一个函数，来源于jQuery库中；
2.自执行函数；（无需调用，自己调用自己，自动执行）
3.jQuery中的"$"作为window对象的一个属性；
3.1. $(" ") 作用：
1.选择器
2.创建一个标签：
//例：
$("<p>可以</p>");4.自执行方法基本骨架:
$(function(){
}());5.加载函数|入口函数|载入函数：
5.1.简写版：
$(function(){
});5.2.完整版：
$(document).ready(function(){
});特点：等网页代码全部执行完毕后，再进行执行，避免因为代码写在网页头部而出现空值问题。
6."$"与jQuery 为等价关系（可互换）
//例：
$("div");===jQuery("div");7.判断$的类型[object Function]：
//运行以下代码可知：
cosole.log(Object.prototype.toString.call($));
$(dom对象); dom就是JS(JavaScript) //例：
console.log(window.jQuery === window.$); //结果：true
console.log(jQuery === $); 结果：true二、JavaScript与jQuery对象的互换
1.将JS转换成jQuery对象形式:$(dom对象);
//例：获取下面的标签对象 <button type="button">设置文本内容</button> // JS形式： var btn = document.querySelector('button'); //jQuery形式： var $btn = $("button");1.2.html()是jQuery获取文本内容的方法
//JS如何使用: console.log($(btn).html());
2.将jQuery对象转换成JS的形式
console.log(btn); //结果：标签
console.log($btn); //结果：数组（且在第一个）通过以上运行结果，我们可以发现上述的规律。
有两种方式：
2.1.通过下标： 由于jQuery得到的是一个数组
console.log($bton[0]);2.2.通过get方法：
console.log($bton.get(0));
三、$方法的使用
1.$.each(); 作用：遍历数组，遍历对象，遍历对象数组
2.$.trim(); 作用：去除字符串的空格 缺点：内容中间的空格去除不掉
3.$.type(); 作用：与JS中的typeof()方法一致：判断值类型
4.$.isArray(); 作用：判断是否为数组
5.$.isFunction(); 作用：判断是否为函数
6.$.parseJSON(); 作用：将一个满足JSON格式（符合数组或对象的定义的字符串转换成对象或数组）
详情：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="./js/jquery-3.3.1.min.js" type="text/javascript"> </script> <script type="text/javascript"> // 定义一个方法测试 $.isFunction();方法 function getName(){ alert(123); } // 一、$的方法使用： 1.$.each(); 作用：遍历数组，遍历对象，遍历对象数组 // 遍历数组 var arr = ["老王","张三","李四","小明"]; $.each(arr,function(index,name){ console.log(index,name); }); // index:下标 name:值 //另一种方式： $(arr).each(function((index,name){ }); //遍历对象 var student = {"name":"小明","sex":"男","age":"19"}; $.each(student,function(name,value){ // name:属性 value:属性值 console.log(name,value); }); //遍历对象数组 var studnets = [{"name":"小明","sex":"男","age":"19"}, {"name":"老王","sex":"男","age":"20"}, {"name":"张三","sex":"男","age":"21"}]; $.each(students,function(index,obj){ // index:下标 obj:对象 console.log(index,obj); //继续遍历拿到对象 $.each(obj,function(name,value){ console.log(name,value); }); }); 2.$.trim(); 作用：去除字符串的空格 缺点：内容中间的空格去除不掉 // 例： var str = " fjd is afj "; console.log(str.length); //结果：15 //jQuery console.log($.trim(str).length); //结果：10 //Js console.log(str.trim(str).length); //结果：10 3.$.type(); 作用：与JS中的typeof()方法一致：判断值类型 // 例： console.log($.type(arr)); //结果：数组 console.log($.type(student)); //结果：对象 console.log($.type(studnets)); //结果：数组 4.$.isArray(); 作用：判断是否为数组 // 例： console.log($.isArray(arr)); //结果：false console.log($.isArray(studnet)); //结果：true 5.$.isFunction(); 作用：判断是否为函数 // 例： console.log($.isFunction(arr)); //结果：false console.log($.isFunction(getName)); //结果：true 6.$.parseJSON(); 作用：将一个满足JSON格式（符合数组或对象的定义的字符串转换成对象或数组） // 例： var person = "小华"; //不符合JSON格式 // var stu = {"name":"小明","sex":"男","age":"19"}; //符合JSON格式,但有错误(双引号里面不能再出现双引号) // 解决：转义或单引号 //6.1.转义 var stu = "{\"name\":\"小明\",\"sex\":\"男\",\"age\":\"19\"}"; console.log($.type(stu)); //结果：String类型 console.log($.parseJSON(stu)); //结果：obj类型 //6.2.单引号 var stu1 = '{"name":"小明","sex\":"男","age":"19"}'; console.log($.parseJSON(stu1)); //结果：obj类型 // 对象遍历 $.each($.parseJSON(stu),function(name,value){ console.log(name,value) }); </script> </body> </html>
四、jQuery的其它方法
1.attr(); 方法 作用：设置或获取非标单元素中自带的属性
2.removeAttr(); 方法 作用：移除属性
3.addClass(); 方法 作用：添加样式，如果已有一个样式，再次用该方法，会叠加
4.prop(); 方法 作用：专门用来获取和设置表单元素
5.html(); 方法 作用：获取非表单标签以及文本内容
6.test(); 方法 作用：获取文本内容
7.val(); 方法 作用：获取表单元素的value属性值
详情：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 设置css样式 --> <style type="text/css"> /* 测试案例三 */ .oBox2{ width: 100px; height: 100px; background-color: red; } .sb{ border:10px solid yellow; } </style> <!-- jQuery的样式设置 --> <script src="js/jquery-3.3.1.min.js" type="text/javascript"> </script> <!-- jQuery代码 --> <script type="text/javascript"> // 加载函数 1.attr(); 方法 作用：设置或获取非标单元素中自带的属性 // 案例一： $(function(){ // 1.1获取 // 例： $("#oBtn1").click(function(){ // alert($("#oDiv").attr("id")); 结果：oDiv }); // 1.2设置 $("#oBtn2").click(function(){ // 例： alert($("#oDiv").attr("name","demo")); //结果：成功设置name属性和值 }); //1.3设置表单元素 $("#oBtn3").click(function(){ // 例： alert($("#inputs").attr("name","demo")); //结果：成功设置name属性和值 }); //1.4获取表单元素 $("#oBtn4").click(function(){ // 例： alert($("#inputs").attr("value")); //结果：文本框输入的value值获取不到，只能获取已有的value值 }); 2.removeAttr(); 方法 作用：移除属性 // 案例二 // 例 1： $("#oBtn5").click(function(){ //移除id属性 $("#ok").removeAttr("id"); //结果： 成功移除 //移除name属性 $("#ok").removeAttr("id"); //结果： 成功移除 }); // 例 2： $("#oBtn7").click(function(){ //移除sb样式,class中有两个样式属性 // 1.移除指定样式： $("#oDiv2").removeAttr("sb"); //结果： 成功移除sb样式,保留了一个样式 // 2.移除全部样式： $("#oDiv2").removeAttr("class"); //结果：全部移除 }); 3.addClass(); 方法 作用：添加样式 // 案例三 // 例： $("#oBtn6").click(function(){ //添加样式 $("#oDiv2").addClass("oBox2"); //结果： 成功添加 // 注意：如果标签上有class 继续使用addClass后悔叠加样式 }); 4.prop(); 方法 作用：专门用来获取和设置表单元素 // 案例四 // 例： $(".myBtn").click(function(){ //获取 alert($("#one").prop('name')); //结果：内容获取 //设置(自定义属性不行，只能设置已有属性) $("#one").prop("name","Hello"); //结果：改变了属性 $("#one").prop("value","Hello"); //结果：设置成功 }); // 案例五 5.html(); 方法 作用：获取非表单标签以及文本内容 // 例： console.log($("#demo1").html()); // 注：表单元素通过html(),结果空 6.test(); 方法 作用：获取文本内容 // 例： console.log($("#demo1").text()); // 注：表单元素通过text(),结果空 7.val(); 方法 作用：获取表单元素的value属性值 // 例： console.log($("#demo2").val()); // 注：获取非表单元素，结果为空 }); </script> </head> <body> <!-- 案例一： --> <div id="oDiv" style="width: 100px;height: 100px;"> </div> <input type="text" name="" id="inputs" value="" /> <button type="button" id="oBtn1">点击获取</button> <button type="button" id="oBtn2">点击设置</button> <button type="button" id="oBtn3">点击设置input</button> <button type="button" id="oBtn4">点击获取input</button> <!-- 案例二 --> <h4>removeAttr方法 移除属性</h4> <div id="ok" name = "sb"> </div> <button id="oBtn5" type="button">移除name属性</button> <!-- 案例三 --> <h4>addClass 添加样式</h4> <div id="oDiv2" class="sb oBox2"> </div> <button type="button" id="oBtn6">添加样式</button> <button type="button" id="oBtn7">移除样式</button> <!-- 案例四 --> <hr > <h4>prop 专门用来获取和设置表单元素</h4> <input type="text" name="sb" id="one" value="" /> <button type="button" class="myBtn">点击设置</button> <!-- 案例五 --> <hr > <div id="demo1"> <input type="" name="" id="demo2" value="123" /> 好好学习 <div id="">天天向上 </div> </div> </body> </html>
五、jQuery的滚动事件
1.原生态JavaScript的dom对象滚动事件：
window.onscroll = function{ }2.jQuery对象滚动事件
scrollTop()； //获取滚动条距离窗体上面的距离 $(window).scroll(function(){ console.log($(this).scrollTop()); });
六、获取窗体的大小
1.offset(); 获取窗体位置的方法（整个窗口）
offset().top // 获取距离窗体上面的位置值 offset().left // 获取距离窗体左边的位置值2.position(); 获取相对位置（父容器）
position().top // 相对定位上面位置值 position().left // 相对定位左边位置值3.width(); 获取宽度 不包括边框以及内填充
4.height(); 获取高度 不包括边框以及内填充
5.innerWidth(); 获取宽度和内填充
6.innerHeight(); 获取高度和内填充
7.outerWidth()； 获取宽度和内填充和边框
8.outerHeight(); 获取高度和内填充和边框
七、思维导图：
8379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
