jQuery基础学习

Posted yyzyyx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery基础学习相关的知识,希望对你有一定的参考价值。

1.广受欢迎的 javascript 框架:

  • jQuery
  • Prototype
  • MooTools
  • 这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理

2.jQuery 使用 CSS 选择器(即html元素)来访问和操作网页上的 HTML 元素(DOM 对象)。

3.jQuery 是一个 JavaScript 函数库。

  jQuery 库包含以下特性:

    HTML 元素选取

    HTML 元素操作

    CSS 操作

    HTML 事件函数

    JavaScript 特效和动画

    HTML DOM 遍历和修改

    AJAX

    Utilities

4.jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数

  

    可以通过下面的标记把 jQuery 添加到网页中:

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

    注意,<script> 标签应该位于页面的 <head> 部分。

5.通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)

      jQuery 语法实例

                      $(this).hide()        演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
            $("#test").hide()      演示 jQuery hide() 函数,隐藏 id="test" 的元素。
                      $("p").hide()                   演示 jQuery hide() 函数,隐藏所有 <p> 元素。
                     $(".test").hide()               演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
6.jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

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

     美元符号$定义 jQuery选择符。

    (selector)“查询”和“查找” HTML 元素

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

7.所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码

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

  

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

9.jQuery事件:是为事件处理特别设计的。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

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

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

 而不要直接在html中的<script>标签中直接书写jQuery函数。直接采用在<script>标签中使用src属性来引用外部文件。

11.

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

12.

 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突,则重命名 jQuery 库

13.

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

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

 



 

以上是关于jQuery基础学习的主要内容,如果未能解决你的问题,请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

jQuery学习手册

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)