2021-05-17

了解jQuery

     是什么？     What？

          * 一个js函数库：write less，do more

          *封装简化DOM操作（ CRDU-增删查改-）/Ajax

 

 CURD是一个数据库技术中的缩写词,一般的项目开发的各种参数的基本功能都是CURD。它代表创建(Create)、更新(Update)、读取(Read)和删除(Delete)

 

   什么用它？why？

          *强大的选择器：方便快速查找DOM元素

          *隐式遍历（迭代）：一次操作多个元素

          *读写合一：读数据/写数据用的是一个函数

          *事件处理

          *链式调用

          *DOM操作（CUD）

          *样式操作

如何使用：how？

          *引入jQuery库

               *本地引入（主要用来测试）与CDN远程引入（网络引入）

               *测试版（未压缩）与生产版（压缩版）、

          *使用jQuery

               *使用jQuery函数：$/jQuery

               *使用jQuery对象：$xxx(执行$()得到的)

jQuery的2把利器

     *jQuery函数：$/jQuery

               *jQuery向外暴露的就是jQuery函数，可以直接使用

               *当成函数使用：$(param)

                         *param是function：相当于window.οnlοad=function（文档加载完成的监听）{   }

                         *param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象

                         *param是DON元素：将DOM元素对象包装为jQuery对象返回$（this）

                         *param是标签字符串：创建标签DOM元素对象并包装为jQuery对象返回

               *当成对象使用：$.xxx

                    *each（obj/arr，function（key，value）{  }）

                    *trim

     *jQuery 对象

          *包含所有匹配的n个DOM元素的伪数组对象

          *执行$()返回的就是jQuery对象

          *基本行为：

               *length/size（）：得到DOM元素的个数

               *[index]:得到指定下标对应的DOM元素

               *each（function（index，domEle）{   }）:遍历所有DOM元素

               *index（）；得到当前DOM元素在所有兄弟中的下标

3.选择器

          *是什么？

               *有某特定语法规则（css选择器）的字符串

               *用来查找某个/些DOM元素：$(selector)

          *分类

               *基本选择器

                    *#id

                    *.class

                    *tagName/*  ------标签名

                    *selector1，selector2，selector3----并集

**并集选择器：**就是选择器同时一起使用同一个样式。

                    *selector1selector2selector3---交集

**交集选择器：**就是相互交集在一起的选择器同时对一个标签进行样式 的书写。

               *层次选择器

                    *找子孙后代，兄弟元素

                         selector1> selector2---子元素

                         selector1  selector2---后代元素

               *过滤选择器

                    *在原有匹匹配元素中筛选出其中一些

                    *  :first

                    *  :last

                    *  :eq(index)

                    *  :lt

                    *  :gt

                    *  :odd

                    *   :even

                    *  :not(selector)

                    *  :hidden—隐藏

                    *  :visible—显示

                    *  [attrName]----属性名

                    *  [ attrName = value] ----属性名 = 属性值

               *表单选择器

                    *  :input

                    *  :text

                    *  :checkbox

                    *  :radio

                    *  :checkbox

4.属性

     *操作标签的属性，标签体文本

     *attr(name)/attr(name,value):读写非布尔值的标签属性

     *prop(name)/prop(name,value):读写布尔值的标签属性

     *removeAttr（name）/removeProp(name):删除属性

     *addClass（classValue）：添加class

     *removeClass（classValue）：移除指定class

     *value（）/val(value)读写标签的value

     *html（）/html（htmlString）：读写标签文本