jQuery 基础

目录

基本使用

  1. 入口函数

    	// 入口函数
	// 文档 准备好 执行函数
	$(document).ready(function(){
    	$('div').hide()
	})

  2. DOM 对象 和 JQuery 对象的区别

    jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法

        <script>
        // DOM对象 使用原生 js 获取过来的对象就是 DOM对象
    	var div = document.querySelector('div')
    	// jQuery对象 用 jQuery 方式获取过来的对象    本质：通过 $ 把 DOM 元素进行了包装
    	$('span')
    	// jQuery 对象只能使用 jQuery 方法    DOM 对象则使用原生 js 属性和方法
    	$('span').hide()
    	div.style.display = 'none'
	</script>

  3. DOM 对象 和 JQuery 对象互转

        <script>
        // DOM 对象转化为 jQuery 对象
        // $(DOM 对象)
        var myvideo = document.querySelector('video')
        // $(myvideo)[0].play()

        // jQuery 对象转化为 DOM 对象
        // jQuery 对象 [index]
        // jQuery 对象.get(index)
        $('video')[0].play()
        // $('video').get(0).play()
    </script>

  4. 隐私迭代

    	<script>
        // 隐私迭代 把匹配的所有元素内部进行遍历循环 给每一个元素都进行一样的操作
        $('div').css('background-color', 'pink')
    </script>

选择器

  1. 筛选选择器

        <script>
        $(function(){
            // 将 ul 里的第一个小 li的颜色设置为红色
            $('ul li:first').css('color','red')
            // 将 ul 里索引为 2 的小 li 的颜色设置为蓝色
            $('ul li:eq(2)').css('color','blue')
            // ol 里奇数 li 设置颜色
            $('ol li:odd').css('color','skyblue')
            // ol li偶数 li 设置颜色
            $('ol li:even').css('color','pink')
        })
    </script>

  2. 筛选方法 上

    父 parent() 子 children()

        <script>
        // 方法都要小括号()
        $(function () {
            // 父 parent() 返回的是 最近一级的父级元素
            console.log($('.son').parent())
            // 子 children() 子代选择器 类似 ul>li
            console.log($('.grandpa').children())
            // 选择里面所有的孩子 find() 类似 ul li
            console.log($('.grandpa').find('.father'))
        })
    </script>

  3. 筛选方法 下

        <script>
        $(function () {
            // 兄弟元素 silbings 除了自身其他所有的亲兄弟
            $('ol .item').siblings('li').css('color', 'red')
            // 第 n 个元素
            // （1）利用选择器的方式选择
            $('ul li:eq(2)').css('color', 'red')
            // （2）利用选择方法 
            $('ul li').eq(3).css('color', 'pink')
            // 判断是否有这个元素 有返回 true 没有返回 false
            console.log($('div:first').hasClass('current'));
            console.log($('div:last').hasClass('current'));
        })
    </script>

操作样式

  1. css() 方法

        <script>
        $(function () {
            // css 只有一个参数时 返回值 不修改
            console.log($('div').css('width'));
            // $('div').css('width','300px')
            // 属性名必须加引号 值为数字可以不加引号和单位
            // $('div').css('width',300)
            // 对象方式修改多个样式
            $('div').css({
                width: 400,
                height: 400,
                // 符合属性使用小驼峰命名 不是数字加引号
                backgroundColor: 'red'
            })
        })
    </script>

  2. 类操作

    添加类 addClass() 删除类 removeClass() 切换类 toggleClass()

        <script>
        $(function(){
            // 添加类 addClass()
            // $('div').click(function(){
            //     $(this).addClass('current')
            // })
            // 删除类 removeClass()
            $('div').click(function(){
                $(this).removeClass('re')
            })
            // 切换类 toggleClass()
            $('div').click(function(){
                // 有这个类名就清除，没有就添加
                $(this).toggleClass('current')
            })
        })
    </script>

动画效果

  1. 显示与隐藏 show([speed],[easing],[fn])

        <script>
        $(function(){
            // show([speed],[easing],[fn])
            // speed 速度 slow normal fast 或者直接输入时间
            // easing 切换效果 默认 swing 可以参数 linear
            // fn 回调函数
            $('button').eq(0).click(function(){
                $('.box').show('normal')
            })
            $('button').eq(1).click(function(){
                $('.box').hide('normal')
            })
            $('button').eq(2).click(function(){
                $('.box').toggle('normal')
            })
        })
    </script>

  2. 滑动效果

    下滑动 slideDown() 上滑动 slideUp() 切换滑动 slideToggle()

        <script>
        $(function(){
            $('button').eq(0).click(function(){
                // 下滑动 slideDown()
                $('.box').slideDown('normal')
            })
            $('button').eq(1).click(function(){
                // 上滑动 slideUp()
                $('.box').slideUp('normal')
            })
            $('button').eq(2).click(function(){
                // 切换滑动 slideToggle()
                $('.box').slideToggle('normal')
            })
        })
    </script>

  3. 淡入淡出效果

    淡入 fadeIn() 淡出 fadeOut() 淡入淡出切换 fadeToggle() 修改透明度 fadeTo()

        <script>
        $(function(){
            $('button').eq(0).click(function(){
                // 淡入 fadeIn()
                $('div').fadeIn(1000)
            })
            $('button').eq(1).click(function(){
                // 淡出 fadeOut()
                $('div').fadeOut(1000)
            })
            $('button').eq(2).click(function(){
                // 淡入淡出切换 fadeToggle()
                $('div').fadeToggle(1000)
            })
            $('button').eq(3).click(function(){
                // 修改透明度 fadeTo()
                $('div').fadeTo(1000,0.6)
            })
        })
    </script>

  4. animate()

        <script>
        $(function () {
            $('button').click(function () {
                $('div').animate({
                    left: 500,
                    top:500,
                    opacity: .4
                }, 1000)
            })
        })
    </script>

属性操作

  1. element.prop('属性名') 获取元素固有的属性值

    // element.prop('属性名')    获取元素固有的属性值
        console.log($('a').prop('href'))
        // 设置属性
        $('a').prop('title','baidu')
        $('input').change(function() {
            console.log($(this).prop('checked'))
        })

  2. 元素的自定义属性通过 attr()

    // 元素的自定义属性通过 attr()
        console.log($('div').attr('index'))
        $('div').attr('index','2')

  3. 数据缓存 data() 这个里面的数据是存放在元素的内存里

    $('span').data('uname', 'xiaoyaee')
        console.log($('span').data('uname'));
// 获取 data-index h5 自定义属性 获取第一个 不用写 data- 返回数字型
        console.log($('div').data('index'));

元素操作

  1. 获取设置元素内容 html() 获取设置元素文本内容 text() 获取设置表单值 val()

        <script>
        $(function () {
            // 获取设置元素内容 html()
            console.log($('div').html());
            // $('div').html('123')
            // 获取设置元素文本内容 text()
            console.log($('div').text());
            $('div').text('123')
            // 获取设置表单值 val()
            console.log($('input').val());
            $('input').val('123')
        })
    </script>

  2. 遍历元素

    给同一类元素做不同操作 遍历 each()

        <script>
        $(function () {
            // 隐式迭代
            $('div').css('color', 'red')
            // 给同一类元素做不同操作 遍历 each()
            var arr = ['red', 'green', 'pink']
            // $('div').each(function(index,domEle){
            //     // 第一个参数是索引号
            //     console.log(index);
            //     // 第二个参数是 dom 元素对象
            //     console.log(domEle);
            //     $(domEle).css('color',arr[index])
            // })

            // $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($('div'),function(i,ele){
            //     console.log(i);
            //     console.log(ele);
            // }) 
            $.each(arr, function (i, ele) {
                console.log(i);
                console.log(ele);
            })
            $.each({
                name: 'andy',
                age: 18
            }, function (i, ele) {
                console.log(i);
                console.log(ele);
            })
        })
    </script>

  3. 创建添加删除元素

    内部添加：append() 放到内容的最后面 prepend() 放到内容的最前面

    外部添加：after() 放到内容的最后面 before() 放到内容的最前面

    删除元素：remove() 可以删除匹配的元素 empty() 可以删除匹配元素里的子节点 html('') 可以清空匹配元素里的子节点

        <script>
        // 创建元素
        var li = $('<li>后面添加的 li</li>')
        // 添加元素
        // （1）内部添加
        // $('ul').append(li) // 放到内容的最后面
        $('ul').prepend(li) // 放到内容的最前面
        // （2）外部添加
        var div = $('<div>后面添加的 div</div>')
        // $('div').after(div) // 放到内容的最后面
        $('div').before(div) // 放到内容的最前面
        // 删除元素
        // $('ul').remove() // 可以删除匹配的元素 自杀
        // $('ul').empty() // 可以删除匹配元素里的子节点
        $('ul').html('') // 可以清空匹配元素里的子节点
    </script>

  4. 元素大小

    width() 获取元素的 width innerWidth() 获取元素的 width+padding

    outerWidth() 获取元素的 width+padding+border outerWidth(true) 获取元素的 width+padding+border+margin

        <script>
        $(function () {
            // width() 获取元素的 width
            console.log($('div').width());
            $('div').width(300)
            // innerWidth() 获取元素的 width+padding
            console.log($('div').innerWidth());
            // outerWidth() 获取元素的 width+padding+border
            console.log($('div').outerWidth());
            // outerWidth(true) 获取元素的 width+padding+border+margin
            console.log($('div').outerWidth(true));
        })
    </script>

  5. 元素位置

    offset() 获取距离文档的位置（偏移）和父级没有关系

    position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准 只能获取不能设置

        <script>
        $(function () {
            // offset() 获取距离文档的位置（偏移）和父级没有关系
            console.log($('.son').offset());
            console.log($('.son').offset().top);
            $('.son').offset({
                top: 100,
                left: 100
            })

            // position() 获取相对于带有定位的父级元素的偏移坐标，如果父级都没有定位 则以文档为准
            // 只能获取不能设置
            console.log($('.son').position());
            $('.son').position({
                top: 50,
                left: 50
            })
        })
    </script>

jQuery 文档地址

posted @   xiaoyaee  阅读(20)  评论(0)  编辑  收藏  举报
相关博文：
· JS DOM 基础
· Ajax 基础
· jQuery基础概总+两篇优秀博文分享
· jQuery笔记
· jQuery 的基本使用
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示