jQuery_02 快速入门 $作用和方法

一、jQuery中"$"的概念

1.是一个函数，来源于jQuery库中；

2.自执行函数；（无需调用，自己调用自己，自动执行）

3.jQuery中的"$"作为window对象的一个属性；

3.1. $(" ") 作用：

1.选择器

2.创建一个标签：

4.自执行方法基本骨架:

5.加载函数|入口函数|载入函数：

6."$"与jQuery 为等价关系（可互换）

7.判断$的类型[object Function]：

二、JavaScript与jQuery对象的互换

1.将JS转换成jQuery对象形式:$(dom对象);

2.将jQuery对象转换成JS的形式

三、$方法的使用

详情：

四、jQuery的其它方法

详情：

五、jQuery的滚动事件

六、获取窗体的大小

七、思维导图：

一、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.$); //结果：trueconsole.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//jQueryconsole.log($.trim(str).length);      //结果：10//Jsconsole.log(str.trim(str).length);        //结果：103.$.type();           作用：与JS中的typeof()方法一致：判断值类型// 例：console.log($.type(arr));       //结果：数组console.log($.type(student));     //结果：对象console.log($.type(studnets));        //结果：数组4.$.isArray();        作用：判断是否为数组// 例：console.log($.isArray(arr));       //结果：falseconsole.log($.isArray(studnet));       //结果：true5.$.isFunction();       作用：判断是否为函数// 例：console.log($.isFunction(arr));        //结果：falseconsole.log($.isFunction(getName));        //结果：true6.$.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();          获取高度和内填充和边框

七、思维导图：