jQuery基础

作者: 晓晓的忍儿 | 来源:发表于2018-08-24 18:23 被阅读0次

2019-02-13jQuery
jQuery
Day19--JQuery
jQuery
JQuery 基础
学jQuery:这些就够了！
JQuery
JQuery学习笔记
25.jQuery基础
JQuery知识总结

1.选择器

 基本
:first  :last  :even  :odd  :not  :eq()
 内容
 contains  内容包含某某某的节点
 has 写一个选择器，
 $('li:has(a)')  li里面有a的li
  属性
 input[name]       有属性name的input
 input[name=user]  name属性等于user的input
input[name!=user] name属性不等于user的input
 有属性name的input
 $('input[name]').css('backgroundColor', 'cyan')
属性name值为user的input
 $('input[name=user]').css('backgroundColor', 'cyan')
 属性name值不为user的input
 $('input[name!=user]').css('backgroundColor', 'cyan')
 属性name值以user开头的input
 $('input[name^=user]').css('backgroundColor', 'cyan')
属性name值以user结束的input
 \$('input[name$=user]').css('backgroundColor', 'cyan')
子元素
:first-child
 :last-child
 :nth-child
 找到li标签，li是第一个儿子节点的li标签
$('li:first-child').css('backgroundColor', 'cyan')
找到li标签，li是最后一个儿子节点的li标签
$('li:last-child').css('backgroundColor', 'cyan')
找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
$('li:nth-child(1)').css('backgroundColor', 'cyan')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>无序11</li>
                <li id="1">无序12</li>
                <li>无序13</li>
                <li>无序14</li>
                <li>无序15</li>
                <li><a href="">无序16</a></li>
            </ul>
            <ul id="ww">
                <li>无序21</li>
                <li>无序22</li>
                <li>无序23</li>
                <li>无序24</li>
                <li>无序25</li>
                <li><a href="">无序26</a></li>
            </ul>
        </div>
        <input /><br />
        <input name="apple" /><br />
        <input name="appleasdas" /><br />
        <input name="flower" checked="checked" />
    </body>
</html>
<script >
    $(function(){
//      如下表示class为div1标签的第一个ul标签的第一个li标签 
//      $('#div1 ul li:first').css('background-color','red')
//      如下表示class为div1标签的最后一个ul标签的最后一个li标签      
//      $('#div1 ul:last li:last').css('background-color','red')
//      将下标为偶的标签背景改为红色
//      $('#div1 ul:first li:even').css('background-color','red')
//      $('#ww li').first().css('background-color','red')
//      将所有ul的所有li标签下标为奇的标签背景改为红色
//      $('#div1 ul li:odd').css('background-color','red')
//      根据下标找到指定的标签
//      $('ul:first li:eq(2)').css('background-color','red')
//      $('ul:first li').eq(2).css('background-color','red')
//      根据标签的文本内容查找标签
//      $('li:contains("无序2")').css('background-color','red')
//      寻找li里面有a的li
//      $('li:has(a)').css('background-color','red')
//      $('li').has('a').css('background-color','red')
        // 有属性name的input
//      $('input[name]').css('background-color','red')
        // 属性name值为user的input
//      $('input[name=apple]').css('background-color','red')
        // 属性name值不为user的input
//      $('input[name!=apple]').css('background-color','red')
        // 属性name值以user开头的input
//      $('input[name^=apple]').css('background-color','red')
        // 属性name值以user结束的input
//      $('input[name$=wer]').css('background-color','red')
//      找到所有兄弟作为老大的li标签
//      $('li:first-child').css('background-color','red')
        //找到所有兄弟作为老幺的li标签
//      $('li:last-child').css('background-color','red')
//      找到所有兄弟老n的li标签,在这里下标从1开始
        $('li:nth-child(1)').css('background-color','red')  
    })
</script>

2、样式添加、属性获取

css({})
        // 可以连写-链式操作
        // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
        // 可以传递一个js对象，直接全部修改
        // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})
    attr()
        // 获取指定节点的class属性
        // console.log($('#lala').attr('class'))
        // 只能获取第一个符合要求的id属性
        // console.log($('.libai').attr('id'))
        // 通过eq选择第二个符合要求的id属性
        // console.log($('.libai:eq(1)').attr('id'))
        // 给指定节点添加属性
        // $('#lala').attr('class', 'bai').attr('name', '狗蛋')
    removeAttr()
        // 将指定节点的属性删除
        // $('#lala').removeAttr('class')
    prop()
        经常用来设置checked、selected等属性，设置的值就是true、false
        // 所有下标大于1的多选框选中
        // $('input:gt(1)').prop('checked', true)
        // 将第二个下拉框设置为默认选中
        // $('#se > option:eq(2)').prop('selected', true)
    addClass     
        // $('#lala').addClass('hei')
    removeClass  
        // 给指定的节点添加类名
        // $('#lala').addClass('hei')
        // 给指定的节点移除指定的节点class名  bai
        // $('#lala').removeClass('bai')
    toggleClass 
        // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
        // $('#lala').toggleClass('bai')
    html()
        // 读取或者设置节点内容，和innerHTML功能相同
        // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))
    text()
        读取或者设置节点内容，和innerText功能相同
    val()
        // 读取input框里面的内容
        // console.log($('#ip').val())
        // 设置input框里面的内容
        // console.log($('#ip').val('今天中午吃什么呢？'))
    width() 
    height()  
        // 读取指定对象宽度  不带px
        // console.log($('#dudu').width())
        // 设置宽度  不带px
        // console.log($('#dudu').width(300))
        // 读取高度
        // console.log($('#dudu').height())
        // 设置高度
        // console.log($('#dudu').height(400))
    offset() 
        // 获取div的top值和left值
        // console.log($('#dudu').offset().top, $('#dudu').offset().left)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式和属性</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
    <style>
    #dudu {
        width: 400px;
        height: 500px;
        background-color: pink;
        position: absolute;
        top: 100px;
        left: 300px;
    }
    </style>
</head>
<body>
    <div id="lala" class="">
        <b>
        朝辞白帝彩云间
        千里江陵一日还
        两岸猿声啼不住
        轻舟已过万重山
        </b>
    </div>
    <div class="libai" id="laowang">
        李白乘舟将欲行
        忽闻岸上踏歌声
        桃花潭水深千尺
        不及汪伦送我情
    </div>
    <li><input type="checkbox">抽烟</li>
    <li><input type="checkbox">喝酒</li>
    <li><input type="checkbox">烫头</li>
    <li><input type="checkbox">足疗</li>

    <select name="" id="se">
        <option value="">请选择</option>
        <option value="">四川</option>
        <option value="">河南</option>
        <option value="">云南</option>
    </select>

    <input id="ip" type="text" value="请输入用户名哈哈">

    <div id="dudu"></div>
</body>
</html>
<script>
$(function () {
    // 可以连写-链式操作
    // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
    // 可以传递一个js对象，直接全部修改
    // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

    // 获取指定节点的class属性
    // console.log($('#lala').attr('class'))
    // 只能获取第一个符合要求的id属性
    // console.log($('.libai').attr('id'))
    // 通过eq选择第二个符合要求的id属性
    // console.log($('.libai:eq(1)').attr('id'))
    // 给指定节点添加属性
    // $('#lala').attr('class', 'bai').attr('name', '狗蛋')

    // 将指定节点的属性删除
    // $('#lala').removeAttr('class')

    // 所有下标大于1的多选框选中
    // $('input:gt(1)').prop('checked', true)
    // 将第二个下拉框设置为默认选中
    // $('#se > option:eq(2)').prop('selected', true)

    // 给指定的节点添加类名
    // $('#lala').addClass('hei')
    // 给指定的节点移除指定的节点class名  bai
    // $('#lala').removeClass('bai')

    // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
    // $('#lala').toggleClass('bai')

    // 读取或者设置节点内容，和innerHTML功能相同
    // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

    // console.log($('#lala').text())
    // console.log($('#lala').html())

    // 读取input框里面的内容
    // console.log($('#ip').val())
    // 设置input框里面的内容
    // console.log($('#ip').val('今天中午吃什么呢？'))

    // 读取指定对象宽度  不带px
    // console.log($('#dudu').width())
    // 设置宽度  不带px
    // console.log($('#dudu').width(300))
    // 读取高度
    // console.log($('#dudu').height())
    // 设置高度
    // console.log($('#dudu').height(400))

    // 获取div的top值和left值
    // console.log($('#dudu').offset().top, $('#dudu').offset().left)
})
</script>

3.js与jquery相互转化

js对象和jquery对象的函数不能通用
    js对象和jquery对象相互转化
    // var odiv = document.getElementById('dudu')
    // js对象转化jquery对象
    // console.log($(odiv).width())

    // jquery对象转化为js对象
    // console.log($('#dudu')[0].style.width)
    // console.log($('.lala')[1].style.width)

4.、文档处理

append
    appendTo
    prepend
    prependTo
        // 向父节点末尾添加子节点
        // $('#car').append('<li>本田飞度</li>')
        // 通过子节点调用，添加到父节点末尾
        // $('<li>本田飞度</li>').appendTo($('#car'))
        // 通过父节点调用，添加到父节点的最前面
        // $('#car').prepend('<li>本田飞度</li>')
        // 通过子节点调用，添加到父节点的最前面
        // $('<li>通用别克</li>').prependTo($('#car'))
    after
    before
        // 是兄弟节点关系，在mao节点后面添加一个指定节点
        // $('#mao').after('<li>铃木雨燕</li>')
        // 是兄弟节点关系，在mao节点前面添加一个指定节点
        // $('#mao').before('<li>铃木雨燕</li>')
    empty
    remove
        // 清空指定节点里面的内容，节点还在
        // $('#mao').empty()
        // 原生js中：父节点.removeChild(子节点)
        // 通过子节点直接调用，删除当前节点
        // $('#mao').remove()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li>无序11</li>
                <li id="1">无序12</li>
                <li>无序13</li>
                <li>无序14</li>
                <li>无序15</li>
                <li><a href="">无序16</a></li>
            </ul>
            <ul>
                <li>无序21</li>
                <li>无序22</li>
                <li>无序23</li>
                <li>无序24</li>
                <li>无序25</li>
                <li><a href="">无序26</a></li>
            </ul>
        </div>
    </body>
</html>
<script >
//  append 最后添加
//  appendTo
//  prepend 最前添加
//  prependTo
//  $('ul:first').append('<li>无序17</li>')
//  $('ul:first li:has("a")').append('<br><a href="">无序161</a>')
//  $('<li>无序27</li>').appendTo('ul:last')
//  $('ul:first').prepend('<li>无序10</li>')
//  $('<li>无序20</li>').prependTo('ul:last')

//  after before  对应于兄弟关系
//  $('ul:first li:eq(1)').after('<li>无序12.1</li>')
//  $('ul:first li:eq(1)').before('<li>无序12.0</li>')

//  empty remove
//  $('ul:first li:eq(1)').empty()
//  $('ul:first li:eq(3)').remove()
</script>

5.筛选和查找

 eq
        // $('li').eq(n).css('backgroundColor', 'red')
        // $('li:eq(0)').css('backgroundColor', 'red')
        // $('li:eq(' + 0 + ')').css('backgroundColor', 'red')
    first
    last
        // 第一个li   和:first 一模一样
        // $('li').first().css('backgroundColor', 'red')
        // 最后一个li   和:last 一模一样
        // $('li').last().css('backgroundColor', 'red')
    hasClass
        // 判断有没有这个class,有就返回true，没有返回false
        // console.log($('li').eq(0).hasClass('wang'))
    filter
        // 找到所有li，过滤出来 .jing 的这些li
        // $('li').filter('.jing').css('backgroundColor', 'cyan')
    slice
        // 取出符合要求li里面的第0个和第1个   [start, end)
        // $('li').slice(0, 2).css('backgroundColor', 'cyan')

    children
        // 所有的儿子节点
        // $('#nan').children().css('backgroundColor', 'red')
        // 儿子节点中 有 .feng 的节点
        // $('#nan').children('.feng').css('backgroundColor', 'red')
    find
        // 去子孙节点中查找所有的 .feng 的节点
        // $('#nan').find('.feng').css('backgroundColor', 'cyan')
    next
    nextAll
        // 指定对象的下一个兄弟节点
        // $('#wu').next().css('backgroundColor', 'cyan')
        // 指定对象的后面所有的节点
        // $('#wu').nextAll().css('backgroundColor', 'cyan')
    prev       指定对象的上一个兄弟节点
    prevAll    指定对象的上面所有的兄弟节点
    parent     
    parents
        // 找到当前节点的父节点
        // $('.lin').parent().css('backgroundColor', 'cyan')
        // 查找得到所有的上层节点
        // $('#qing').parents().css('backgroundColor', 'cyan')
        // 查找得到指定的上层节点
        // $('#qing').parents('div').css('backgroundColor', 'cyan')
    siblings
        // 查找qing节点所有的兄弟节点
        // $('#qing').siblings().css('backgroundColor', 'orange')
        // 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
        // $('#qing').siblings('.lin').css('backgroundColor', 'orange')

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
    </head>
    <body>
         <ul>
        <li class="jing">王静</li>
        <li class="wang">闫晓红</li>
        <li class="jing">刘慧芳</li>
        <li>李琳</li>
    </ul>
    </body>
</html>
<script type="text/javascript">
    $(function(){
//      hasClass
//      判断有没有这个class,有就返回true，没有返回false
//      console.log($('li').eq(0).hasClass('wang'))
//      console.log($('li').hasClass('wang'))
//      filter
//      找到所有li，过滤出来 .jing 的这些li
//      $('li').filter('.wang').css('backgroundColor', 'cyan')
//      下面得到的是一个数组
//      var a=$('li').filter('.jing')
//      console.log(a[0])
//      slice
//      取出符合要求li里面的第0个和第1个   [start, end)
//      $('li').slice(0, 2).css('backgroundColor', 'cyan')
        })
</script>

6.事件

添加事件
        $('div).click(function () {})
    事件绑定
        on  off  one
        绑定事件
        $('div').on('click', test1)
        $('div').on('click', test2)
        取消事件绑定
        $('div').off('click', test2)

        // 事件只能触发一次
        $('div').one('click', test2)
    取消冒泡
        ev.stopPropagation()
    阻止默认行为
        ev.preventDefault()
    获取鼠标坐标
        ev.pageX, ev.pageY
    index
        // 得到指定jquery对象在前面数组中的下标
        // console.log($('div').index($('#heng')))

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
    </head>
    <body>
        <div id="dudu" style="width:200px; height:200px; background-color: red;">
            <div id="du"style="width:100px; height:100px; background-color: deepskyblue;">
                
            </div>
        </div>
        <div class="didi" style="width:200px; height:200px; background-color: yellow;">
            
        </div>
        <div class="di" style="width:200px; height:200px; background-color: bisque;">
            <a href="http://www.baidu.com/">百度一下</a>
        </div>
        <div class="didi" style="width:200px; height:200px; background-color: cyan;"></div>
        
    </body>
</html>
<script >
    $(function(){
//      添加事件
        $('#dudu').click(function(){
            $(this).css({width:'300px',height:'300px',backgroundColor:'pink'})
        })
//      绑定事件
//      $('.didi').on('click',function(){
//          alert('已绑定')
//      
//      function lala(){
//          alert('已绑定')
//      }
//      $('.didi').on('click',lala)
//      $('.didi').off('click',lala)
//      $('.didi').one('click',function(){
//          alert('已绑定')
//      })
//      取消冒泡
//      $('#du').click(function(ev){
//          ev.stopPropagation()
//          获取鼠标位置
//          console.log(ev.pageX,ev.pageY)
//      })
//      阻止默认事件preventDefault()
//      $('.di a').click(function(ev){
//          alert('dfs')
//          ev.preventDefault()
//      })
//      获取下标
//      console.log($('div').index($('.di')))
    })
</script>

7.动画

show()
        // 参数1：动画的事件
        // 参数2：动画完毕之后执行的函数
        $('#dudu').show(5000, function () {
            alert('菊花残,满地伤')
        })
    hide()
        和show一样
        $('#dudu').hide(5000, fn)
    slidedown()
        原来不显示，动画下拉显示
        $('#dudu').slideDown(5000)
    slideup()
        原来显示，动画的上拉消失
    slideToggler()
        如果隐藏就下拉显示，如果显示就上拉消失
    fadeIn()
        // 慢慢的显示出来
        // $('#dudu').fadeIn(5000)
    fadeOut()
        // 慢慢的消失
        // $('#dudu').fadeOut(5000)
    fadeTo()
        // 5秒之内，透明度变为0.01
        // $('#dudu').fadeTo(5000, 0.01)
    fadeToggle()
        如果隐藏就淡入显示，如果显示就淡出消失
    自定义的动画效果
    animate()
        // 自定义动画
        // $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)
    stop()
        停止动画
        $('#dudu').stop()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <script src="jquery/jquery-1.11.3.min.js">
            
        </script>
        
    </head>
    <body>
        <div id="div2">
            
        </div>
        <button id="btn" style="position: absolute; top:250px;">点我看动画</button>
    </body>
</html>
<script>
    $(function(){
//      $('#div2').css('width','200px').css('height','200px').css('background-color','red')
        $('#div2').css({width:'200px',height:'200px',backgroundColor:'red',display:'block'})
        $('#btn').click(function(){
//          $('#div2').show(5000,function(){
//              动画完了执行alert
//              alert('菊花残,满地伤')
//          })
//          $('#div2').show(5000)
//          $('#div2').hide(5000)
//          $('#div2').toggle(5000)
//          $('#div2').slideDown(5000)
//          $('#div2').slideUp(5000)
//          $('#div2').slideToggle(5000)
//          $('#div2').fadeIn(5000)
//          $('#div2').fadeOut(5000)
//          $('#div2').fadeToggle(5000)
//          $('#div2').fadeTo(5000,0.1)
//          停止动画效果
            $('#div2').stop()
        })
//      自定义动画效果
        $('#div2').click(function(){
            $('#div2').css({left:'7px',top:'7px',position:'absolute'})
            $('#div2').animate({left:600,top:200},5000,function(){
                $('#div2').animate({top:300},5000)
            })
        })
    })  
</script>