zoukankan      html  css  js  c++  java
  • jquery 学习(一):jQuery 简介

    jQuery 库 - 特性:

        jQuery 是一个 JavaScript 函数库

        jQuery 库包含以下特性:

           html 元素获取

           html 元素操作

           css 操作

           html 事件函数,

           JavaScript 特效和动画,

           html DOM 遍历和修改,

           ajax,

           Utilities 

    给自己的页面添加 jQuery 库

        如需使用 jQuery,您需要下载 jQuery 库,然后把它包含在希望使用的网页中。

        jQuery 库是一个 JavaScript 文件(其中包含了所有的 jQuery 函数),您可以使用 HTML 的 <script> 标签引用它:

    <head>
      <script type="text/javascript" src="jquery.js"></script>
    </head>

        请注意,<script> 标签应该位于页面的 <head> 部分。(<script> 标签中的 type="text/javascript" 可以不用写,因为 JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言)

        库的替代:

          如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

    <head>
      <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    </head>

    jQuery 语法:

        jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作,因此 jQuery 的基本语法是:$(selector).action()

        说明如下:

            1、美元符号定义 jQuery

            2、选择符(selector)“查询”和“查找” html 元素

            3、jQuery 的 action() 执行对元素的操作

    jQuery 选择器:

        选择器允许您对单个元素或元素组进行操作

        jQuery 元素选择器属性选择器允许您通过标签名属性名内容对 html 元素进行选择。

      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").css("background-color","red");    //该实例可以把所有 p元素的背景颜色更改为红色

      更多的选择器实例:

          $(this)      //当前 html 元素

          $(".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 代码置于事件处理函数中

        jQuery 事件处理方法是 jQuery 中的核心函数。(事件处理方法指的是当 HTML 中发生某些事件时所调用的方法。)

        通常会把 jQuery 代码放到 <head>部分的事件处理方法中。

        实例:  $("button").click(function() { ..some code... })    //在该实例中,当按钮的点击事件被触发时会调用一个函数。

      单独文件中的函数:

          如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。(具体怎么写?)

          当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好。(通过 src 属性来引用文件)

          实例:

    <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="my_jquery_functions.js"></script>
    </head>

      jQuery 名称冲突:

        jQuery 使用 $ 符号作为 jQuery 的简介方式,但某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

        jQuery 使用名为 noConflict() 的方法来解决该问题 —— var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

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

          $(document).ready(function)    //当文档加载完成时

          $(selector).click(function)    //被选择的元素的单击事件

          $(selector).dblclick(function)    //双击

          $(selector).focus(function)    //获得焦点

          $(selector).mouseover(function)  //鼠标悬停

  • 相关阅读:
    Linux 02
    Linux 01
    React 函数式组件的 Ref 和子组件访问(useImperativeHandle)
    排序算法之 Java插入排序算法
    排序算法之 Java选择排序算法
    排序算法之 Java冒泡算法
    类加载的过程---验证和准备
    类加载的过程---加载
    mysql explain 查询处理的结果详解
    springboot整合分布式缓存hazelCast
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/8047016.html
Copyright © 2011-2022 走看看