jQuery部分01----jQuery基础

最新推荐文章于 2024-04-24 10:00:20 发布

A &......

最新推荐文章于 2024-04-24 10:00:20 发布

阅读量159

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/118334390

版权

1.首先引入jquery,然后声明jQuery入口函数，

    <script>
        $(function() {})
    </script>

jQuery入口函数和js入口函数的区别：

        一：声明方式不同，jQuery的入口函数是用${function(){}}方式声明的，而js的入口函数是用 window.onload() = function(){}方式声明；
        二：jQuery的入口函数可以重复使用多次，不会存在后面覆盖前面的问题；而js的入口函数只能声明一次，如果声明多次，
        后面的就会覆盖前面的；
        三：js的入口函数是等到网页都加载完成之后，才执行入口函数里面的内容，而jQuery是等DOM元素加载完成之后才执行入口函数里面的内容；

2.jquery选择器：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li id="id8">8</li>
        <li id="id7">9</li>
    </ul>
    <script>
        $(function() {
            console.log($('#id8'));
        })
    </script>
</body>

 通过id选择器选中第8个li，打印出来，是一个jquery类型的对象，jquery类型的对象和DOM类型的对象不一样，jquery类型的对象不能使用
 DOM类型对象的一些属性，例如innerHTML属性，jquery类型的对象有自己的属性，一般是方法，jquery类型的对象和DOM类型的对象相互转换：

        $(function() {
            console.log($('#id8'));
            console.log($('#id8').innerHTML = 333); //不报错，会打印出来，但是不起作用
            // jquery类型的对象转换成DOM类型的对象
            console.log($('#id8')[0]);
            console.log($('#id8')[0].innerHTML = 444);  //起作用，第8个li改变成了444

        })

    <script>
        $(function() {
             //将DOM类型的对象转换成jquery类型的对象
            console.log($(document.querySelector('#id8')));
        })
    </script>

        $(function() {
            //id选择器
            console.log($('#id8'));
            //类选择器
            console.log($('.li7'));
            //标签选择器
            console.log($('li'));
            //并集选择器
            console.log($('ul,li'));  //获取所有的ul,li元素
            //交集选择器
            console.log($('div.redClass')); //class为redClass的div元素，注意区分后代选择器
            //子代选择器
            console.log($('ul>li'));   //获取儿子层级的元素
            //后代选择器
            console.log($('ul li'));   //使用空格，代表后代选择器，获取ul下面的所有li元素
        })

        $(function() {
            //过滤选择器
            $('li:eq(2)').css('color', 'red') //选中li下索引为2的元素

            $('li:odd').css('color', 'blue')  //选中li下单数的元素

            $('li:even').css('color','red')  //选中li下双数的元素

        })

        $(function() {
            //筛选选择器
            //children（selector）
            $('ul').children('li') //相等于$('ul>li'),子类选择器
            //find（selector）
            $('ul').find('li')  //相等于$('ul li'),后代选择器
            //siblings(selector)  查找兄弟节点
            $('#id8').siblings('li')  
            //parent() 查找父亲
            $('#id8').parent();
            //eq(index) 查找索引为index的元素
            $('li').eq(2)
            //next() 找上一个兄弟
            $('li').next()
            //prev() 找上一个兄弟
            $('li').prev()
            //index()  获取当前的位置索引
            $('#id8').index()
            //not()  除了
            $('li').not('#id8')  //除了id为id8的其他li元素
        })

3.jquery事件

    3.1语法
    单击事件：
    $('button').click(function(){})
    单击事件用click，不用onclick；click是一个方法，不是属性，直接（）调用，

点击自己颜色变红，其他颜色不变的效果；

    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <script>
        $(function() {
            $('button').click(function() {
                $('button').css('color', 'black');
                console.log(this);
                $(this).css("color", "red");   //这里面的this不加引号
            })
        })
    </script>

        //双击事件
        $('button').dblclick(function(){})
        //鼠标移入
        $('button').mouseover(function(){})
        $('button').mouseover(function(){})
        //鼠标移出
        $('button').mouseleave(function(){})
        $('button').mouseout(function(){})

        //获取焦点
        $('button').focus(function(){})
        //失去焦点
        $('button').blur(function(){})

4.jQuery css（）方法

 4.1获取属性

    <ul>
        <li id="id1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            console.log($('#id1').css('font-size'));    //14px
        })
    </script>

 4.2 设置css属性

    <ul>
        <li id="id1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            console.log($('#id1').css('background-color', 'red'));
        })
    </script>

 4.3 设置多个css属性

        $(function() {
            console.log($('#id1').css({
                'background-color': 'red',
                'color': 'blue',
                'font-size': '20px'
            }));
        })

5.jQuery css类

  5.1 addClass()
  向被选元素添加一个或多个类

    <style>
        .red {
            color: red;
        }
        
        .bcc {
            background-color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <button>点我改变样式</button>
        <li id="id1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            $('button').click(function() {
                $('#id1').addClass('red');
                $('#id1').addClass('bcc')
            })
        })
    </script>

 5.2 removeClass() 从被选元素中删除一个或多个类

        $(function() {
            $('button').click(function() {
                $('#id1').addClass('red');
                $('#id1').addClass('bcc')
                $('#id1').removeClass('bcc')
            })
        })
    </script>

 5.3 toggleClass()  对被选元素进行添加/删除类的切换操作

每点击一次按钮，背景色就切换一次案例

    <style>
        div {
            height: 1000px;
            background-color: white;
        }
        
        .Bla {
            background-color: black;
        }
    </style>
</head>

<body>
    <button>点我</button>
    <div></div>
    <script>
        $(function() {
            $('button').click(function() {
                $('div').toggleClass('Bla')
            })
        })
    </script>

  5.4 eq()  方法返回带有被选元素的指定索引号的元素
  5.5 index() 方法返回指定元素相对于其他同级元素的index位置；

    <ul>
        <button>点我改变样式</button>
        <li id="id1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            $('button').click(function() {
                console.log($(this).index());  //返回0
            })
        })
    </script>

   5.6 not() 方法返回指定元素之外的元素

6.jQuery动画

 6.1 jQuery隐藏显示：hide()和show()方法可以用来隐藏和显示HTML元素

    <ul>
        <button>点我显示</button>
        <button>点我隐藏</button>
        <li id="id1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            $('button:eq(0)').click(function() {
                $('#id1').show()
            });
            $('button:eq(1)').click(function() {
                $('#id1').hide()
            })
        })
    </script>

  6.2 jquery淡入淡出效果
  fadeIn() 方法用于淡入以隐藏的元素，fadeOut()方法淡出可见元素，里面可以传递参数：’slow‘缓慢淡入，淡出，
  'fast',
  也可以传时间，表示多长时间完成事件；

        <button>点我淡入显示</button>
        <button>点我淡出隐藏</button>
        <div id='id1'></div>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <script>
        $(function() {
            $('button:eq(0)').click(function() {
                // $('#id1').fadeIn();
                // $('#id1').fadeIn('slow');
                $('#id1').fadeIn(3000);
            });
            $('button:eq(1)').click(function() {
                // $('#id1').fadeOut();
                // $('#id1').fadeOut('slow');
                $('#id1').fadeOut(3000);
            })
        })

  6.3 fadeToggle()方法可以在fageIn()方法之间进行切换
  6.4 fadeTo()方法允许渐变为给定的不诱明度
  6.5 slideDown()方法用于向下滑动元素，slideUp()方法用于向上滑动元素；

        <button>点我下滑</button>
        <button>点我上滑</button>
        <div id='id1'></div>
    <script>
        $(function() {
            $('button:eq(0)').click(function() {
                $('#id1').slideDown();

            });
            $('button:eq(1)').click(function() {
                $('#id1').slideUp();

            })
        })
    </script>

   6.6 自定义动画：
   animate()方法用于创建自己自定义动画，可选的speed参数规定时长，它可以取以下值：'slow','fast'或者毫秒，
   可选的callback是一个回调函数，动画完成之后才执行。animate方法参数有三个：一个要给动画的对象；
   一个时间；一个回调函数；

A &......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery部分01----jQuery基础

1.首先引入jquery,然后声明jQuery入口函数， <script> $(function() {}) </script>jQuery入口函数和js入口函数的区别：一：声明方式不同，jQuery的入口函数是用${function(){}}方式声明的，而js的入口函数是用 window.onload() = function(){}方式声明；二：jQuery的入口函数可以重复使用多次，不会存在后面覆盖前面的问
复制链接

扫一扫