jquery的基本使用

jQuery的基本使用

选择器

$('选择器')

  <p>我是p标签</p>
    <div class="div">
        <p>我是div中的p</p>
        <div>
            <p>我是div下的div的p</p>
        </div>
    </div>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 选择器
        console.log($)
        $('p').css('backgroundColor', 'red')
        $('.div p').css('backgroundColor', 'skyblue')
            // DOM转为jQuery对象
        var p = document.querySelector('p');
        var $p = $(p)
        $p.css('backgroundColor', 'yellow')
        console.log($p)

        // 事件绑定
        $('p').click(function() {
            // this 表示触发事件的元素
            $(this).css('backgroundColor', 'green')
        })
    </script>

内容操作

html('') html()改变内部的html 读取html

text('') text() 改变文本内容 读取文本内容

 <div class="div1"></div>
    <div class="div2"></div>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 返回的还是jQuery对象，意味着支持链式编程
        $('.div1').html('<a href="">你好</a>')
        $('.div2').text('<a href="">你好</a>')

        console.log($('.div1').html())
        console.log($('.div1').text())
    </script>

过滤方法

first()第一个元素

last()最后一个元素

eq(索引) 在遍历的时候获得指定索引的元素

 <!-- 过滤方法 first() last()  eq(索引) 返回的都是jQuery对象-->
    <div class="box">
        <button>-</button>
        <span>0</span>
        <button>+</button>
    </div>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        var span = $('.box>span')
        var num = span.text()
            // $('.box button:first-child')
        $('.box button').first().click(function() {
                console.log('减少')
                if (num > 0) {
                    num--
                    span.text(num)
                } else {
                    alert('到底了');
                }
            })
            // $('.box button:last-child')
        $('.box button').last().click(function() {

            console.log('增加')
            if (span.text() < 10) {
                num++
                span.text(num)
            } else {
                alert('到头了');
            }
        })
    </script>

样式操作

css('属性名','属性值')给指定元素设置属性及属性值

css({}) 给指定元素设置样式 以对象的形式作为参数

css('属性名') 获取指定属性的值

   <style>
        p {
            color: #333;
        }
        
        div {
            width: 200px;
            height: 200px;
            margin-top: 20px;
            border: 1px solid #000;
        }
    </style>
    <h3>css方法</h3>
    <p>css方法可以设置和获取元素样式</p>
    <div class="box"></div>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 设置样式
        $('.box').css('backgroundColor', 'pink')
        $('.box').css('border', '10px solid yellow')
            // 用对象的形式设置
        $('.box').css({
                'width': 100,
                'height': 100,
                'backgroundColor': 'red'
            })
            // 获取样式属性值
        let width = $('.box').css('width')
        console.log(width)
    </script>

属性操作

 <a href="" self="123">百度</a>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 设置属性的值
        $('a').attr('href', 'https:www.baidu.com')
            // 获取指定属性的值
        var hrefValue = $('a').attr('href')
        console.log(hrefValue)
            // 删除指定属性的值
        $('a').removeAttr('self')
    </script>

值的操作

 <input type="text" class="text">
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $('.text').val('设置值');
        let value = $('.text').val();
        console.log('获得的值为:', value)
    </script>

元素的查找

<!-- 元素查找 
     父元素 parent() 
     子元素 children()  children('选择器') 
    兄弟元素 siblings()   siblings('选择器')
    后代元素 find('选择器') 
    返回的都是jQuery对象
-->

类名操作

 <div class="box"></div>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        // 默认是没有样式的,即使你添加了类名
        let has = $('.box').hasClass();
        console.log(has)
        $('.box').addClass('bg')
            // 移除所有的样式,如果不指定类名
        $('.box').removeClass('bg')
        $('.box').click(function() {
            $(this).toggleClass('bg')
        })
    </script>

事件

事件的注册和移除

  <!-- 
    .事件名(function（）{}) 注册事件
    on('事件名',function(){})  注册事件
    off('事件名')移除指定的事件
    off()移除该元素的所有的事件
    one('事件名',function(){})注册事件一次性事件 只能怪触发一次
-->
    <input type="text" class="text">
    <script>
        $('.text').on('input', function() {
            console.log($(this).val())
        })
        $('.text').off('input')
        $('.text').one('input', function() {
            alert($(this).val())
        })
    </script>

事件的触发

  <!--
    直接触发事件  .事件名()
    .trigger('事件名')  可以触发所有的事件,包括自定义事件
    定义自定义事件
    .on('自定义事件',function(){})
 -->
    <input type="text" class="text">
    <script>
        $('.text').click(function() {
                console.log('我被点击了')
            })
            // 触发事件
        $('.text').click()

        $('.text').on('my', function() {
            console.log('自定义事件触发了')
        })
        $('.text').trigger('my');

window事件绑定

 <script>
        // 滚动事件  用jq的写法是  $(window).scroll(function(){})
        window.onscroll = function() {}
            // 点击事件   jq写法  $(window).click(){}
        window.onclick = function() {}
    </script>