• 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.

  • 相关阅读:
    获取当前用户的网络状态--iOS
    网络请求 ---iOS
    一个小项目中需要注意的几个地方
    在项目中几个需要学习的知识
    简单三级联动的建立
    验证码在页面中的使用
    嘿嘿。今天学习了AJAX的几个方法
    状态保持以及AJAX的初步学习
    webform的学习(2)
    WebForm的初步认识
  • 原文地址:https://www.cnblogs.com/expiator/p/7676933.html
Copyright © 2020-2023  润新知