jQuery简单汇总

最新推荐文章于 2024-06-16 12:11:30 发布

wtt123_

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量98

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/wtt123_/article/details/127600040

版权

1，基本使用，引入jquery库，选择生产版本

    <script src="./jquery.js"></script>------引入jquery
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script>
    //等着页面加载完成后执行此代码(避免此代码放在div标签之前呈现不出效果)
    //$符号是jquery的简称
    $(function(){
        //隐藏div
        $('div').hide();
    })
</script>

2，注意原生dom对象和jquery对象的区别

<script>
 //1--获取原生dom对象
 var mydiv=document.querySelector('div');
 //获取jquery对象
 $('div');
//2--原生dom对象的使用
mydiv.style.display='none';
//jquery对象使用
$('div').hide()
</script>

3，原生dom对象和jquery对象的转换

<script>
获取原生dom对象
 var mydiv=document.querySelector('div');
获取jquery对象
 $('div');
 dom对象转换为jquery对象------$(mydiv)
 jquery对象转换为dom对象------$('div')[0].play()||$('div').get(0).play()
</script>

4，隐式迭代

遍历内部的dom元素的过程就是隐式迭代，意思就是给匹配到的所有元素进行循环遍历，执行相应的方法

    // 获取到的div背景色改变
    $('div').css('background','blue');
      // 获取到的li标签字体颜色改变
    $('ul li').css('color',red)

5，选择器的使用

   $(function(){
        $('ul li:first').css('background','pink') //第一个li
        $('ul li:eq(2)').css('background','blue') //索引值为2
        $('ul li:odd').css('color','red') //奇数
        $('ul li:even').css('color','orange') //偶数
    })