jQuery基础知识点（一）

最新推荐文章于 2022-12-11 12:50:28 发布

qq_41675286

最新推荐文章于 2022-12-11 12:50:28 发布

阅读量223

点赞数

本文链接：https://blog.csdn.net/qq_41675286/article/details/79243945

版权

一、jQuery教程：
jQuery是一个“写的更少，但做的更多”的轻量级JavaScript库，它极大地简化了JavaScript编程，它是很容易学习地
1. 你将学到什么？
①学到如何通过使用jQuery应用JavaScript效果
②学习到如何选取HTML元素，以及如何对它们进行类似隐藏、移动以及操作其内容等任务。
2. 你需要具备的基础知识：①HTML ②CSS ③JavaScript
二、jQuery简介：
jQuery库可以通过一行简单的标记被添加到网页中。
jQuery是一个JavaScript函数库
1. jQuery库的特性：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历修改
AJAX
Utilities
2. 向您的页面添加jQuery库：
jQuery库位于一个JS文件中，其中包含了所有的jQuery函数。
可以通过下面的标记把jQuery添加到网页中：

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

        【注意】<script>标签应该位于页面的<head>部分
3. 库的替代：
Google和Microsoft对jQuery的支持都很好。如果你不愿意在自己的电脑存放jQuery库，那么可以从Google和Microsoft加载CDN jQuery核心文件。
  使用谷歌或微软的jQuery有一个很大的优势：许多用户在访问其它站点时，已经从谷歌或微软加载过jQuery。所以结果是，当他们访问你的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样可以提高加载速度。
  ①使用Google(谷歌)的CDN(内容分发网络)：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/
jquery.min.js">
</head>

  ②使用Microsoft(微软)的CDN：

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0
.js">
</head>

三、jQuery语法：
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。
1. 基础语法是：$(selector).action() ①美元符号定义jQuery
②选择符(selector)“查询”和“查找”HTML元素
③jQuery的action()执行对元素的操作
2. 示例：

    $(this).hide()  隐藏当前元素
    $("p").hide()  隐藏所有段落
    $(".test").hide()  隐藏所有class="test"的所有元素
    $("#test").hide()  隐藏所有id="test"的元素·

四、jQuery选择器：
选择器允许你对元素组成或单个元素进行操作。
1. jQuery元素选择器：
jQuery使用CSS选择器来选取HTML元素。
示例：

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

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

          $("[href]") 选取所有带有href属性的元素
          $("[href='#']") 选取所有带有href值等于"#"的元素
          $("[href!='#']") 选取所有带有href值不等于"#"的元素
          $("[href$='.jpg']") 选取所有href值以".jpg"结尾的元素

更多选择器实例：

五、jQuery事件
jQuery是为事件处理特别设计的。
1. jQuery事件函数：
  jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生
  某些事件时所调用的方法。通常会把jQuery代码放到部分的事件处理方法中
2. 单独文件中的函数：
  如果你的网站包含许多页面，并且你希望你的jQuery函数易于维护，那么你可以把你的jQuery函数放到独立的.js文件中（通过src属性来引用文件）
  例如：

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

jQuery名称冲突：
jQuery使用 $符合作为jQuery的简介方式。某些其它js库中的函数同样使用$ 符号。碰到这样的问题jQuery使用名为noConflict()方法来解决该问题。
Var jq=jQuery.noConflict(),帮助你使用自己的名称（比如jq来代替$）
jQuery事件：
下面是jQuery中事件方法的一些例子：

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