zoukankan      html  css  js  c++  java
  • jquery

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。

    Jquery选择器

    • 1.ID选择器:即通过id获取对应的标签,$('#实际id')
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="d1"><p>id="d1"</p></div>
    <div id="d2">id="d2"</div>
    
    
    <script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
    <script type="text/javascript">
        $('#d1').css('color','red');
        $('#d2').css('color','blue');
    </script>
    </body>
    </html>
    

    效果:

    • 2.标签名选择器element $('标签名')
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="d1"><p>id="d1"</p></div>
    <div id="d2">id="d2"</div>
    
    
    <script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
    <script type="text/javascript">
        $('div').css('color','red');
        $('p').css('color','blue');
    </script>
    </body>
    </html>
    

    效果:

    • 类选择器 通过找到类,进行操作 $('.类名')
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="d1"><p>id="d1"</p></div>
    <div class="d2">id="d2"</div>
    
    
    <script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
    <script type="text/javascript">
        $('.d1').css('color','red');
        $('.d2').css('color','blue');
    </script>
    </body>
    </html>
    

    效果:

    • *选择器 匹配所有元素 $('*')
    • 群组选择器 以上选择器的组合,同时匹配多个$('#id,.类,div')
    • 后代选择器 即通过父标签找到子标签
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="d1"><p>id="d1"</p>
    <div class="d2">id="d1-d2"</div>
    </div>
    <div class="d2">id="d2"</div>
    <script src="jquery-1.12.4.js"></script>   <!--导入jquery脚本-->
    <script type="text/javascript">
        $('.d1 .d2').css('color','red');
    </script>
    </body>
    </html>
    

    效果:

    • 指定选择器 即通过标签指定匹配的类 $('dev.类名')
    • 子选择器 即通过父标签找到所有的子标签
    • next选择器 找到匹配标签的下一个

    $('选择器+下一个选择器')或者
    $('选择器').next(下一个选择器)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <div id="demo">div</div>
    <P>p4</P>
    <p>p5</p>
    <p>p6</p>
    <P>p7</P>
    <script  rel="script"  src="jquery-1.12.4.js"></script>
    <script>
    //$('#demo').next('p').css('color','red'); //第一种方法
    $('#demo+p').css('color','red');        //第二种方法
    </script>
    </body>
    </html>
    

    效果:

    • nextall选择器 取出匹配的选择器后面所有的 $('选择器~下一个选择器')或者$('选择器').nextAll('下一个选择器')

    • 基本筛选器:

      • :first 第一个
      • :not(selector) 取反
      • :even 奇数行
      • :odd 偶数行
      • :eq(index) 等于
      • :gt(index) 大于
      • :last 最后一个
      • :lt(index) 小于
      • :header 匹配如 h1, h2, h3之类的标题元素
      • :animated 只有对不在执行动画效果的元素执行一个动画特效
      • :focus 添加一个"focused"的类名给那些有focus方法的元素
    • 属性

      • [attribute] 属性名 $('div[id]')
      • [attribute=value] 指定属性值$("input[name='newsletter']").attr("checked", true);
      • [attribute!=value]
      • [attribute^=value]
      • [attribute$=value]
      • [attribute*=value]
      • [attrSel1][attrSel2][attrSelN]

    操作:

    CSS
    属性的操作

    html()
    text()
    val()
    文本的操作

    事件

    底层一样,但是在此基础上JQuery还做了优化

    1. 如何使用JQuery绑定
    2. 当文档加载完毕后,自动执行! ###重要!

    $(function(){
    ...
    })
    3. 延迟绑定:

    $("ul").delegate("l1","click",funcation(){
    ...
    })

    现增加,现绑定

    PS: 一定要先找到父标签,ul,相当于选择器
    4. return false; 后面也就不提交了,和Dom里一样;

    扩展:

    $.xxx来执行, 如 $.login
    form表单验证
    Ajax:

    AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
    大白话:偷偷发请求

    执行JQuery:

    JQuery.xxx
    $.xxx
    JQuery的循环

    .each()

  • 相关阅读:
    笨蛋蛋都能学会的开机grub消除(双系统开机总是黑屏肿么办--多半是欠reset)
    Find a way HDU
    非常可乐 HDU
    Oil Deposits HDU
    迷宫问题 POJ
    Fire!
    Fire Game FZU
    Pots POJ
    Prime Path POJ
    Jquery鼠标悬停按钮图标动态变化效果
  • 原文地址:https://www.cnblogs.com/pycode/p/5811868.html
Copyright © 2011-2022 走看看