【jQuery基础语法】上

目录

一、jquery的入口函数

二、DOM对象和jQuery对象的相互转化

DOM对象转换为jQuery对象：

jQuery对象转换成DOM对象：

三、jquery常用的API

四、jquery尺寸

五、jquery位置

六、jquery方法

---

把js中的dom操作进行了封装

一、jquery的入口函数

$(function(){
            //此处是页面的DOM加载完成的入口
        });

$(document).ready(function(){
            //此处是页面DOM加载完成的入口
        });

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jquery帮我们完成封装
2. 相当于原生js中的DOMContentLoad
3. 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

$是jquery的别称，同时也是jQuery的顶级对象

jquery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

二、DOM对象和jQuery对象的相互转化

DOM对象转换为jQuery对象：

                                          $(DOM对象)

①使用直接获取的元素   $(‘video’)   要写引号

②使用原生js获取过来的DOM对象   

var myvideo=document.querySelector(‘video’)     $(myvideo)  不写引号

jQuery对象转换成DOM对象：

①$(‘div’)[index]  index是索引号

②$(‘div’).get(index)   index是索引号

注意：jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法

---

三、jquery常用的API

获取元素

$(“选择器”)    直接写css选择器即可，但是要加引号，单引号和双引号都可

选择器：

        #id  *  .class   div  div,p,li   li.current

        ul>li   ul li

       :first  :last   :eq(index) 注意这里索引号是从0开始，css中nth-child(n) n是从1开始   

      :odd        :even

筛选方法：

        查找最近一级的父级     parent()   祖辈用parents(“选择器”)

        查找最近一级儿子 children(selector)

        相当于后代选择器    find(selector)

        查找兄弟节点，不包括自己本身   siblings(selector)     

        查找当前元素之后所有的同辈节点    nextAll([expr])

        查找当前元素之前的所有同辈元素     prevAll([expr])

        检查当前的元素是否含有某个特定的类，如果有，则返回true   hasClsss(class)

        相当于查找第几个孩子   index从0开始   eq（index)

---

设置css样式

     元素.css(“属性”，”值”)

1. 参数只写属性名，则是返回属性值
2. 属性必须加引号，值如果是数字可以不加单位和引号
3. 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性名可以不加引号

---

设置类样式                只会对指定类进行操作，不影响原先的类名

        添加类   addClass(“类名”)

        删除类  removeClass(“类名”)

        切换类   toggleClass(“类名”)

设置或获取元素固有属性prop()

        所谓元素固有属性就是元素本身自带的属性

设置或获取元素自定义属性值attr()

数据缓存

        data()  可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新。之前存放的数据都将被移除。它还可以读取HTML5自定义属性data-index,此时不用写data-只需要写index即可，得到的是数字型

设置或获取文本值

        普通元素内容html()

        普通元素文本内容 text()

        设置获取表单值val()

---

元素操作

1.遍历元素

        jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要遍历

        ①each(function(index,domEle){})

                each()方法遍历匹配每一个元素，主要用DOM处理，each每一个

                index是每个元素的索引号，注意：demEle是每个DOM元素对象，不是jQuery对象

                如果要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

        ②$.each(object,function(index,element){})

                $.each()方法可用于遍历任何对象主要用于数据处理，比如数组、对象

                index是每个元素的索引号，element遍历的内容

                function()里面如果返回false则停止循环类似break 否则均表示执行下一次循环类似continue

2. 创建元素

        $(“<li></li>”)

3.添加元素

        内部添加

                element.append(“内容”)   放到匹配元素内部的最后面

                element.prepend(“内容”)   放到匹配元素内部的最前面

        外部添加

                element.after(“内容”)    把内容放到目标元素后面

                element.before(“内容”)   把内容放到目标元素前面

4.删除元素

                element.remove()  删除匹配的元素本身

                element.empty()   删除匹配的元素集合中所有的子节点  本身还存在

                element.html(“”)  清空匹配的元素内容  本身还存在

补充知识点：

        得到当前元素的索引号$(this).index()

        $(this) this不要加引号

        :checked选择器  查找被选中的表单元素

---

四、jquery尺寸

        width()/height()   取得匹配元素宽度和高度值，只算width/height

        innerWidth()/innerHeight()   取得匹配元素宽度和高度值，包含padding

        outerWidth()/outerHeight()   取得匹配元素宽度和高度值 包含padding,border

        outerWidth(true)/outerHeight(true)  取得匹配元素宽度和高度值，包含padding,border,margin

注意：

        以上参数为空，则是获取相应值，返回的是数字型

        如果参数是数字，则是修改相应的值

        参数可以不必写单位

五、jquery位置

 位置主要有三个：offset(),position(),scrollTop()/scrollLeft()

        offset()设置或获取元素偏移

                ①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

               ②该方法有两个属性：left、top、offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

                ③可以设置元素的偏移：offset({top:10,left:30})

        position()获取元素偏移

                ①返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

                ②这个方法只能获取，不能设置偏移

        页面被卷去头部：   $(document).scrollTop()

---

带有动画的返回顶部

核心原理：使用animate动画返回顶部

animate动画函数里面有一个scrollTop属性，可以设置位置

但是元素做动画，因此$(‘body，html’).stop().animate({scrollTop:0})

---

六、jquery方法

显示和隐藏  show()  hide()  toggle()  都有三个可选参数[speed],[easing],[fn]

滑动  slideDown()  slideUp()   slideToggle()  都有三个可选参数[speed],[easing],[fn]

事件切换  hover([over,] out)  over:鼠标经过要触发的函数   out:鼠标移除要触发的函数

                    如果只写一个函数，则鼠标经过的移除都要触发的函数

动画或效果队列  动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行

                          解决方法：停止排队   stop()    注意：他要写到动画或效果的前面，相当于停止结束上一次动画

淡入淡出  fadeIn()    fadeOut()    fadeToggle()  都有三个可选参数[speed],[easing],[fn]

           fadeTo( speed,opacity,[easing],[fn] ) opacity取值是0~1

自定义动画  animate(params,[speed],[easing],[fn])

            params:想要更改的样式属性，以对象形式传递，属性名可以不用带引号

---