zoukankan      html  css  js  c++  java
  • jquery摘要

    jQuery 语法实例

    $(this).hide()
    演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
    $("#test").hide()
    演示 jQuery hide() 函数,隐藏 id="test" 的元素。
    $("p").hide()
    演示 jQuery hide() 函数,隐藏所有 <p> 元素。
    $(".test").hide()
    演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

    示例

    $(this).hide() - 隐藏当前元素

    $("p").hide() - 隐藏所有段落

    $("p.test").hide() - 隐藏所有 class="test" 的段落

    $("#test").hide() - 隐藏所有 id="test" 的元素

    jQuery 元素选择器

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。

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

    $("p#demo") 选取 id="demo" 的第一个 <p> 元素。

    jQuery 属性选择器

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("[href]") 选取所有带有 href 属性的元素。

    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    下面的例子把所有 p 元素的背景颜色更改为红色:

    实例

    $("p").css("background-color","red");

    更多的选择器实例

    语法 描述
    $(this) 当前 HTML 元素
    $("p") 所有 <p> 元素
    $("p.intro") 所有 class="intro" 的 <p> 元素
    $(".intro") 所有 class="intro" 的元素
    $("#intro") id="intro" 的第一个元素
    $("ul li:first") 每个 <ul> 的第一个 <li> 元素
    $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
    $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

     

    jQuery 事件

    下面是 jQuery 中事件方法的一些例子:

    Event 函数 绑定函数至
    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

    jQuery 效果 - 来自本页

    函数 描述
    $(selector).hide() 隐藏被选元素
    $(selector).show() 显示被选元素
    $(selector).toggle() 切换(在隐藏与显示之间)被选元素
    $(selector).slideDown() 向下滑动(显示)被选元素
    $(selector).slideUp() 向上滑动(隐藏)被选元素
    $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
    $(selector).fadeIn() 淡入被选元素
    $(selector).fadeOut() 淡出被选元素
    $(selector).fadeTo() 把被选元素淡出为给定的不透明度
    $(selector).animate() 对被选元素执行自定义动画

    jQuery HTML 操作 - 来自本页

    函数 描述
    $(selector).html(content) 改变被选元素的(内部)HTML
    $(selector).append(content) 向被选元素的(内部)HTML 追加内容
    $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
    $(selector).after(content) 在被选元素之后添加 HTML
    $(selector).before(content) 在被选元素之前添加 HTML

    jQuery CSS 函数 - 来自本页

    CSS 属性 描述
    $(selector).css(name,value) 为匹配元素设置样式属性的值
    $(selector).css({properties}) 为匹配元素设置多个样式属性
    $(selector).css(name) 获得第一个匹配元素的样式属性值
    $(selector).height(value) 设置匹配元素的高度
    $(selector).width(value) 设置匹配元素的宽度

    jQuery AJAX 请求

    请求 描述
    $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
    $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
    $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
    $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
    $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
    $.getScript(url,callback) 加载并执行远程的 JavaScript 文件

    (url) 被加载的数据的 URL(地址)

    (data) 发送到服务器的数据的键/值对象

    (callback) 当数据被加载时,所执行的函数

    (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

    (options) 完整 AJAX 请求的所有键/值对选项

  • 相关阅读:
    How To Build CyanogenMod Android for smartphone
    CentOS安装Code::Blocks
    How to Dual boot Multiple ROMs on Your Android SmartPhone (Upto Five Roms)?
    Audacious——Linux音乐播放器
    How to Dual Boot Multiple ROMs on Your Android Phone
    Everything You Need to Know About Rooting Your Android Phone
    How to Flash a ROM to Your Android Phone
    什么是NANDroid,如何加载NANDroid备份?
    Have you considered compiled a batman-adv.ko for android?
    BATMAN—Better Approach To Mobile Adhoc Networking (B.A.T.M.A.N.)
  • 原文地址:https://www.cnblogs.com/zhuawang/p/2001327.html
Copyright © 2011-2022 走看看