zoukankan      html  css  js  c++  java
  • JQuery基础


    在JQuery的开头总是这样写:
    ①$(function() {
        //加入的内容
    });
    ②$().ready((function() {
        //加入的内容
    });
    ③$(document).ready((function() {
        //加入的内容
    });

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
    如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

    1、试图隐藏一个不存在的元素

    2、获得未完全加载的图像的大小

    jQuery 语法实例

    $(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" 结尾的元素。

    jQuery CSS 选择器

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    下面的例子把所有 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 使用 $ 符号作为 jQuery 的简介方式。
    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
    jQuery 使用名为 noConflict() 的方法来解决该问题。
    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号

    jQuery 事件

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

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

  • 相关阅读:
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    《算法竞赛入门经典》 例题35 生成元 (Digit Generator, ACM ICPC Seoul 2005,UVa)
    SVN分支
    SVN分支
    SVN 版本回退
    SVN 版本回退
    如何在excel中取消合并单元格后内容自动填充?
    如何在excel中取消合并单元格后内容自动填充?
    如何让自己像打王者荣耀一样发了疯、拼了命的学习?
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3188432.html
Copyright © 2011-2022 走看看