【无标题】

最新推荐文章于 2024-05-30 11:27:58 发布

黄酱！

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量292

点赞数

分类专栏： JS 文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/tianranran/article/details/122971858

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

//console.log($('button')[0])
        // $(document).ready(function(){
        //     console.log($('button')[0])
        // })

        //这个是上面方式的简写形式
        $(function(){
            console.log($('button')[0])
        })
    </script>
</head>
<body>
    <button>赶紧关麦!</button>
    <!--CDN静态资源地址，做了网络优化，加载速度更快，更节省资源-->
    <!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
    
    <script>
        /*
            jquery
            + 库，方法库
            + 使用原生JS它不香吗？真不香。原生JS实现一个功能代码需要很多行，代码无法进行简化的，对很多老的
            浏览器支持性不好（js有很多的新的语法）
            + 为了快速实现开发，有人就把常用的一些选择器和js功能进行了封装，供咱们使用
            + 把常见的DOM操作进行了简化处理
              => 获取元素
              => 创建元素
              => 删除元素
              => 设置属性
              => 获取属性
              => ...
            + 注意点：
              => jquery $ 关键字，表示的就是jquery库的本身，所以你们在开发中不要使用这两个名称
              => 引用的文件名称中如果有min这个关键字都是压缩文件
        */
        // document.querySelector('.box')
        // document.getElementById()

        //jQuery $ 关键字，表示的就是jquery库的本身，所以你们在开发中不要使用这两个名称
        // console.log($)
        // console.log(jQuery)

        // console.log($)

        //默认给咱们把元素已经遍历了
        // console.log($('button')[0])

        //程序入口，它的作用和原生JS里面的onload事件的作用一样
        //当咱们设置了程序入口后，会等待咱们的页面加载完毕后再去执行jquery代码
        $(document).ready(function(){

        })

        $(function(){

        })
    </script>

<button>按钮</button>
    <div class="box"></div>
    <p id="p1"></p>
    <ul>
        <li>我是li标记1</li>
        <li>我是li标记2</li>
        <li>我是li标记3</li>
        <li>我是li标记4</li>
        <li>我是li标记5</li>
    </ul>

    <input type="text" value=""/>
    <input type="password" value="" />

    <script src="js/jquery.min.js"></script>
    <script>
        // let btn = jQuery('button')[0]
        // console.log(btn)

        // let box = $('.box')[0]
        // console.log(box)

        // let p1 = $('#p1')[0]
        // console.log(p1)

        //jquery可以和原生JS混用
        // let aLi = $('ul>li')
        // console.log(aLi)

        // aLi[0].onclick = ()=>{
        //     alert(1)
        // }
        // aLi[1].onclick = ()=>{
        //     alert(1)
        // }

        // for(let i=0; i<aLi.length; i++){
        //     aLi[i].onclick = ()=>{
        //         alert(1)
        //     }
        // }

        let txt = $('input[type=text]')[0]
        console.log(txt)
    </script>

<body>
    <ul>
        <li>这是第1个li标记</li>
        <li>这是第2个li标记</li>
        <li>这是第3个li标记</li>
        <li>这是第4个li标记</li>
        <li>这是第5个li标记</li>
        <li>这是第6个li标记</li>
        <li>这是第7个li标记</li>
        <li>这是第8个li标记</li>
    </ul>
    <script src="js/jquery.min.js"></script>
    <script>
        // console.log($('ul>li:first'))
        // console.log($('li:first'))
        // console.log($('li:last')[0])
        // console.log($('li:eq(2)')[0])

        //注意点：下标为奇数偶数
        console.log($('li:even'))
        console.log($('li:odd'))

    </script>

<body>
    <ul>
        <h1>老大哥</h1>
        <li>这是第1个li标记</li>
        <li>这是第2个li标记</li>
        <li>这是第3个li标记</li>
        <li>这是第4个li标记</li>
        <h2>哈哈</h2>
        <li>这是第5个li标记</li>
        <li>这是第6个li标记</li>
        <li>这是第7个li标记</li>
        <li>这是第8个li标记</li>
        <p>小pp同学</p>
    </ul>

    <div class="box">
        <div class="con"></div>
        <p></p>
        <h1>哈哈</h1>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        // console.log($('li').first())
        // console.log($('li').last())

        // console.log($('li:eq(3)').next())

        // console.log($('li:eq(1)').prev())

        //获取到某个标记后面所有的元素
        // console.log($('li:eq(2)').nextAll())

        //获取到某个标记前面所有的元素
        // console.log($('li:eq(3)').prevAll())

        //注意点：只能找到它父元素
        // console.log($('li:eq(1)').parent())
        //注意点：会找到它所有的祖先元素
        // console.log($('li:eq(1)').parents())

        // console.log($('li:eq(1)').parents().find('body'))

        console.log($('.box').find('div'))
        console.log($('.box').find('p'))
        console.log($('.box').find('h1'))

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

//console.log($('button')[0]) // $(document).ready(function(){ // console.log($('button')[0]) // }) //这个是上面方式的简写形式 $(function(){ console.log($('button')[0]) }) </script></head&g
复制链接

扫一扫