zoukankan      html  css  js  c++  java
  • 前端之jQuery基础

    COPY自强仔

    找到div标签并给div标签设置为红色

    // 原生js操作
    var d1Ele = document.getElementById('d1');
    d1Ele.style.color = 'red';
    
    // jQuery操作
    $('#d1').css('color','blue');
    

    基础语法

    $(selector).action()
    
    // 样式演变,原本应该
    jQuery();
    // 为了简化
    $();

    基本选择器

    id选择器:

    $("#id")

    标签选择器:

    $("tagName")

    class选择器:

    $(".className")

    配合使用:

    $("div.c1")  // 找到有c1 class类的div标签

    所有元素选择器:

    $("*")

    组合选择器:

    $("#id, .className, tagName")

    层级选择器:

    x和y可以为任意选择器

    $("x y");// x的所有后代y(子子孙孙)
    $("x > y");// x的所有儿子y(儿子)
    $("x + y")// 找到所有紧挨在x后面的y
    $("x ~ y")// x之后所有的兄弟y

    基本筛选器:

    :first // 第一个
    :last // 最后一个
    :eq(index)// 索引等于index的那个元素
    :even // 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd // 匹配所有索引值为奇数的元素,从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    例子:

    $("div:has(h1)")// 找到所有后代中有h1标签的div标签
    $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
    $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
    $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

    属性选择器:

    [attribute]
    [attribute=value]// 属性等于
    [attribute!=value]// 属性不等于

    例子:

    // 示例
    <input type="text">
    <input type="password">
    <input type="checkbox">
    $("input[type='checkbox']");// 取到checkbox类型的input标签
    $("input[type!='text']");// 取到类型不是text的input标签

    表单筛选器(from表单):

    :text
    :password
    :file
    :radio
    :checkbox
    
    :submit
    :reset
    :button

    例子:

    $(":checkbox")  // 找到所有的checkbox

    表单对象属性:

    :enabled
    :disabled
    :checked
    :selected

    例子:

    找到可用的input标签

    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
    
    $("input:enabled")  // 找到可用的input标签

    找到被选中的option:

    <select id="s1">
      <option value="beijing">北京市</option>
      <option value="shanghai">上海市</option>
      <option selected value="guangzhou">广州市</option>
      <option value="shenzhen">深圳市</option>
    </select>
    
    $(":selected")  // 找到所有被选中的option

    筛选器方法

    下一个元素:

    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")

    上一个元素:

    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

    父亲元素:

    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

    儿子和兄弟元素:

    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

    查找

    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

    $("div").find("p")

    等价于$("div p")

    筛选

    筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

    $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

    等价于 $("div.c1")

    补充:

    .first() // 获取匹配的第一个元素
    .last() // 获取匹配的最后一个元素
    .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
    .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    .eq() // 索引值等于指定值的元素

    三级菜单展示

    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')

    直接操作css属性

    // 两个参数设置属性
    $('#p1').css('font-size','24px')
    // 一个参数获取属性
    $('#p1').css('font-size')
    
    // 一次设置多个属性
    $('#p1').css({"border":"1px solid black","color":"blue"})

    位置操作

    // 不加参数获取位置参数
    $(".c3").offset()
    // 加参数设置位置参数
    $(".c3").offset({top:284,left:400})
    
    // position只能获取值,不能设置值
    
    // scrollTop获取当前滚动条偏移量
    $('window').scrollTop();
    $('window').scrollTop(0);  // 设置滚动条偏移量

    尺寸

    // 盒子模型测试下列参数
    height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()
    // 加参数标签设置值

    文本操作

    // text() html() 不加参数获取值,加参数设置值
    // val() 不加参数获取值,加参数设置值

    自定义登陆校验

    <form action="">
      <div>
        <label for="input-name">用户名</label>
        <input type="text" id="input-name" name="name">
        <span class="error"></span>
      </div>
      <div>
        <label for="input-password">密码</label>
        <input type="password" id="input-password" name="password">
        <span class="error"></span>
      </div>
      <div>
        <input type="button" id="btn" value="提交">
      </div>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $("#btn").click(function () {
        var username = $("#input-name").val();
        var password = $("#input-password").val();
    
        if (username.length === 0) {
          $("#input-name").siblings(".error").text("用户名不能为空");
        }
        if (password.length === 0) {
          $("#input-password").siblings(".error").text("密码不能为空");
        }
      })
    </script>
    
    <!--js代码取消默认事件的方式-->
    return false

    属性操作

    // 获取文本属性
    $('#d1').attr('s1')  // 获取属性值
    $('#d1').attr('s1','haha')  // 设置属性值
    $('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
    $('#d1').removeAttr('taidi')  // 删除一个属性
    
    // 获取check与radio标签的checked属性
    $('#i1').prop('checked')
    $('#i1').prop('checked',true)

    文档处理

    // 标签内部尾部追加元素
    $('#d1').append(pEle)
    $pEle.appendTo($('#d1'))
    
    // 标签内部头部添加元素
    $('#d1').prepend(pEle)
    $pEle.prependTo($('#d1'))
    
    // 标签外部下面添加元素
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面
    
    // 标签外部上面添加元素
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
    //移除和清空元素
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点
    // 替换标签
    replaceWith()  // 什么被什么替换
    replaceAll()  // 拿什么替换什么
    
    // 克隆事例
    <button id="b2">屠龙宝刀,点击就送</button>
    // clone方法加参数true,克隆标签并且克隆标签带的事件
      $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);  // true参数
      });

    事件

    // click事件以上面的克隆案例为参考
    
    // hover事件
    $('p').hover(  // 写两个函数一个表示鼠标移进去,另一个标示鼠标移出来
      function () {
        alert('来啦,老弟')
      },
      function () {
        alert('慢走哦~')
      }
    )
    // input实时监听
        $('#i1').on('input',function () {
            console.log($(this).val())
        });
    
    // focus/blur 其他同理js事件
    
    // 取消标签默认的事件
    return false
    
    $('input').click(function (e) {
            alert(123);
            // return false
            e.preventDefault();
        });
    
    
    // 事件冒泡
    div>p>span  // 三者均绑定点击事件
    $("span").click(function (e) {
            alert("span");
            e.stopPropagation();  // 阻止事件冒泡
        });
    
    // 事件委托
    <button>按钮</button>
    <script src="jQuery-3.3.1.js"></script>
    <script>
        $('body').on('click','button',function () {
            alert(123)
        })
    </script>

    文档加载

    $(document).ready(function(){
    // 在这里写你的JS代码...
    })
    
    $(function(){
    // 你在这里写你的代码
    })

    jQuery自带的动画效果

    // 标签记得设置高和宽
    
    $('img').hide(5000)
    $('img').show(5000)
    
    $('img').slideDown(5000)
    $('img').slideUp(5000)
    
    $('img').fadeIn(5000)
    $('img').fadeOut(5000)
    $('img').fadeTo(5000,0.4)

    each()

    $.each(array,function(index){
      console.log(array[index])
    })
    
    $.each(array,function(){
      console.log(this);
    })
    
    // 支持简写
    $divEles.each(function(){
      console.log(this)  // 标签对象
    })

    data()

    $("div").data("k",100);//给所有div标签都保存一个名为k,值为100
    $("div").data("k");//返回第一个div标签中保存的"k"的值
    $("div").removeData("k");  //移除元素上存放k对应的数据
     
     
     
  • 相关阅读:
    最少乘法次数 http://acm.nyist.net/JudgeOnline/problem.php?pid=46
    取石子(一)http://acm.nyist.net/JudgeOnline/problem.php?pid=23
    数的长度http://acm.nyist.net/JudgeOnline/problem.php?pid=69
    Dinner http://acm.nyist.net/JudgeOnline/problem.php?pid=218
    FatMouse' Trade http://acm.hdu.edu.cn/showproblem.php?pid=1009
    Elevator http://acm.hdu.edu.cn/showproblem.php?pid=1008
    Number Sequence http://acm.hdu.edu.cn/showproblem.php?pid=1005
    阶乘之和http://acm.nyist.net/JudgeOnline/problem.php?pid=91
    对象模型学习总结 (二) . 关于继承和多态
    cubieboard 配置WIFI
  • 原文地址:https://www.cnblogs.com/dongxixi/p/10976357.html
Copyright © 2011-2022 走看看