美文网首页
htmlday8总结

htmlday8总结

作者: xue_y | 来源:发表于2019-02-13 20:38 被阅读0次

    jQuery基础

    jQuery实质就是对js的封装,封装的目的是为了更方便的使用js。
    js的代码写在哪儿,jq代码就可以写在哪儿,但是使用jq之前必须导入jQuery
    导入jQuery
    a.导入本地的jquery

    <script type="text/javascript" src="js/jquery.min.js"></script>
    

    b.导入CDN服务器上的远程的jQuery

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    

    导入jQuery后,就可以在后面使用jQuery语法
    $ -> 代表jQuery对象
    1.onload(js)和ready(jQuery)
    onload - 网页加载完成对应的事件(包括标签加载完成和网络请求完成)

    window.onload = function(){
        pNode = document.getElementById('p1')
        pNode.innerText = 'hello jQuery!'
    }
    

    ready
    $(document).ready(函数) - 网页中标签加载完成后会自动调用对应的函数
    $(匿名函数) - 网页中标签加载完成后会自动调用对应的匿名函数

                $(document).ready(function(){
                    pNode2 = document.getElementById('p2')
                    pNode2.innerText = '你好 jQuery'
                })
    
                //相当于上面的写法
                $(function(){
                    pNode2 = document.getElementById('p2')
                    pNode2.innerText = '你好 jQuery'
                })          
    

    2.节点操作
    1)获取节点
    语法: $('选择器') - 返回的是jQuery的节点对象
    选择器 - 这儿的选择器和CSS的选择器一模一样

                console.log($('#img1'))
                console.log($('.c1'))
                console.log($('p'))
                console.log($('div p'))
                console.log($('#p1,a'))
                
                console.log($('p+a'))  //选中所有紧跟着p标签的a标签
                console.log($('#p3~*'))   //选中和id值是p3的标签后面同级的所有标签
                console.log($('#p3~a'))   //选中和id值是p3的标签后面同级的所有的a标签
                console.log($('p:first'))  //选中当前页面中的第一个p标签
                console.log($('div p:first'))   //选中所有div标签中的第一个p标签
                console.log($('p:last'))        //选中当前页面中的最后一个p标签
                console.log($('div *:first-child'))   //选中div标签中的第一个子标签
    

    2)创建节点
    $('html标签语法')

    imageNode = $("<img src='img/thumb-1.jpg'/ title='图标'>")   //创建一个img标签
    

    3)添加节点

    $('body').append(imageNode)             //在body的最后添加一个子标签
    $('body').prepend($('<input placeholder="请输入账号"/>'))    //在body的最前面插入一个子标签
    $('#img1').before($('<button>before</button>'))   //在id是img1的标签的前面添加一个按钮标签
    $('#img1').after($('<button>after</button>'))   //在id是img1的标签的后面添加一个按钮标签  
    

    4)删除节点

    $('#img1').remove()     //标签.remove()  - 删除指定标签
    $('div').empty()        //标签.empty()   - 清除指定标签中的内容
    

    5)克隆和替换
    clone([Even[,deepEven]])
    3.属性操作
    1.获取普通属性
    标签.attr(属性名) - 这儿的属性名不包括innerHTML,innerText,value

    console.log($('#img2').attr('title'))
    console.log($('#img2').attr('src'))
    

    2.修改/增加普通属性
    标签.attr(属性名,值)

    $('#img2').attr('src', 'img/thumb-3.jpg')
    

    3.特殊属性
    1)innerHTML(标签内容属性) - html()

    console.log($('#div').html())
    $('#div').html('我是新的div')
    

    2)innerText (标签文本内容) - text()

    console.log($('#div').text())
    $('#div').text('我是新的div2')  
    

    3)value (单标签内容) - val()

    console.log($('#user').val())
    $('#user').val('李四')  
    

    4)class
    标签.addClass(类名) - 给标签添加class值

    $('p').addClass('color')
    

    标签.removeClass(类名) - 移除指定的class值

    $('p').removeClass('color')
    

    4.样式属性
    标签.css(样式属性名) - 获取样式属性值
    标签.css(样式属性名, 值) - 设置样式
    标签.css({属性名:属性值, 属性名:属性值 ...}) - 同时设置多种样式属性

    //$('p').css('color', 'slateblue')
    //$('p').css('font-size', '20px')
    $('p').css({
        'color':'red',
        'font-size':'30px'
    })  
    

    4.事件绑定
    标签.on(事件名, 函数) - 和js中的addEventListener是一样的

    $('#btn1').on('click', function(evt){
        alert('点击按钮')
        console.log(this, evt.offsetX, evt.offsetY)
    })
    

    事件冒泡
    子标签上产生的事件,会传递给父标签
    事件捕获:让事件不再传递给父标签
    事件.stopPropagation()

    divNode1 = document.getElementById('div1')
    divNode2 = document.getElementById('div2')
    divNode3 = document.getElementById('div3')
    divNode1.addEventListener('click',function(){
        alert('div1被点击')
    })
    divNode2.addEventListener('click',function(){
        alert('div2被点击')
    })
    divNode3.addEventListener('click',function(evt){
        alert('div3被点击')
        //让evt事件对象不传递给当前标签的父标签
        evt.stopPropagation()
    })
    

    相关文章

      网友评论

          本文标题:htmlday8总结

          本文链接:https://www.haomeiwen.com/subject/ayqjeqtx.html