zoukankan      html  css  js  c++  java
  • jQuery总结

    (以下大部分内容来源于w3s网站)

    一、基本语法

    1.注意:jquery的<script> 标签应该位于页面的 <head> 里面。

    jquery的在线文件有很多,谷歌,微软都可以。加入以下<script>即可使用jQuery

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    选择器

    2. jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。也就是选择器

    基础语法是:$(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)“查询”和“查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作

    示例如下:

    $(this)  :当前 HTML 元素

    $("p")  : 所有 <p> 元素

    $("p.intro") : 所有 class="intro" 的 <p> 元素

    $(".intro") : 所有 class="intro" 的元素

    $("#intro") : id="intro" 的元素

    $("[name=date]") : 选择 name为date 的元素,此处的[  ]内部可以添加多个条件。

    3.获得元素内容 - text()、html() 以及 val()

    三个简单实用的用于 DOM 操作的 jQuery 方法:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值

    示例如下:

    $(this) .text()    : 获取当前元素的文本内容

    $("#intro").html    :  获取id="intro" 的元素的html内容

    $("selector").val() :     设置选中元素的
    $("selector").val(新值)   :修改
    选中元素的值

     4.回调函数.

    text()、html() 以及 val(),同样拥有回调函数。

    他们的回调函数由两个参数构成:被选元素列表中当前元素的下标,以及原始(旧的)值。

    然后以函数新值返回您希望使用的字符串。

    5.通过jQuery添加新的 HTML 内容

    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

     比如:  $("#para").append("test");   表示 id为para的元素末尾添加test

    6.jQuery操作css元素

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性

    7.注意:通过jquery获取的对象,命名时最好在前面加上$。

      var $cr=$("cr");              //jquery对象
      var cr=document.getElementById("cr");     //  js的DOM对象

     二、JQuery遍历

    三、事件

    1、ready 事件:当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。

    所有的jquery代码都会写在$(document).ready(function(){  // --- jQuery functions go here ---- }); 里面。

    比如:

     $(document).ready(function () {
                $("button").click(function () {
                    
                });
            });

    常见的事件如下所示:

    $(document).ready(function) :     将函数绑定到文档的就绪事件(当文档完成加载时)。
    $(selector).click(function)      :     触发或将函数绑定到被选元素的点击事件。

    $(selector).change(function) :     当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

    注意:在jQuery中点击按钮的事件是click,而不是onclick
    $(selector).dblclick(function) :       触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)    :       触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)  :触发或将函数绑定到被选元素的鼠标悬停事件

    2.事件方法

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    用法 :

    $(selector).on(event,childSelector,data,function)

    bind()方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

    用法:

    $(selector).bind(event,data,function)

    data属于可选,enent和function是必选的。

     四、jQuery ajax

    1.load() 方法

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    语法:    $(selector).load(URL,data,callback);

    必需的 URL 参数规定您希望加载的 URL。

    注意:如果要加载的文件在同一文件夹下,可以只写文件名;如果不是在同一文件夹下,需要写绝对路径。

    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

    可选的 callback 参数是 load() 方法完成后所执行的函数名称。

     比如:

    $("#div1").load("demo_test.txt #p1");     表示把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中;

    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象

    2.jQuery $.get() 方法
    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

    语法:   $.get(URL,callback);

    3.jQuery $.post() 方法
    $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
    语法:  $.post(URL,data,callback);

    必需的 URL 参数规定您希望请求的 URL。

    可选的 data 参数规定连同请求发送的数据。

    可选的 callback 参数是请求成功后所执行的函数名。

    4.

  • 相关阅读:
    pgspider sqlite mysql docker 镜像
    pgspider docker 镜像
    pgspider基于pg 的高性能数据可视化sql 集群引擎
    diesel rust orm 框架试用
    golang 条件编译
    Performance Profiling Zeebe
    bazel 学习一 简单java 项目运行
    一个好用node http keeplive agnet
    gox 简单灵活的golang 跨平台编译工具
    mailhog 作为smtp server mock工具
  • 原文地址:https://www.cnblogs.com/expiator/p/7676933.html
Copyright © 2011-2022 走看看