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()

  • 相关阅读:
    TextBox 只有下划线
    can't find web control library(web控件库)
    DropDownListSalesAC”有一个无效 SelectedValue,因为它不在项目列表中。
    IDE、SATA、SCSI、SAS、FC、SSD 硬盘类型
    如何打印1px表格
    CSS控制打印 分页
    Virtual Server could not open its emulated Ethernet switch driver. To fix this problem, reenable the Virtual Server Emulated Et
    Xml中SelectSingleNode方法中的xpath用法
    热带水果莫入冰箱?水果存放冰箱大法
    探索Asp.net的Postback机制
  • 原文地址:https://www.cnblogs.com/pycode/p/5811868.html
Copyright © 2011-2022 走看看