jQuery基础

最新推荐文章于 2024-07-24 16:20:17 发布

jonny6015

最新推荐文章于 2024-07-24 16:20:17 发布

阅读量197

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/u011977189/article/details/72416734

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery简介

什么是jQuery？

jQuery是一个 JavaScript 函数库。
jQuery 极大地简化了 JavaScript 编程，是一个轻量级的“写的少，做的多”的JavaScript库。
jQuery 很容易学习。
实例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

jQuery设计思想是将原始的dom对象封装成一个jQuery对象。
通过调用jQuery对象的方法来实现对原始的dom对象的操作。
这样设计的目的是：是为了更好地兼容不同的浏览器，简化代码

jQuery的安装与使用

寻找jQuery.js；
将jQuery.js引入到HTML中；

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

使用jQuery的api操作文档；

网页中添加jQuery
- 从jQuery官网下载jQuery库 [ 将下载的文件放在网页的同一目录下，就可以使用jQuery。 ]
- 从CDN中载入jQuery，如从Google中加载jQuery

<head>
<script 
//新浪的CDN：
src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

/*
微软的CDN：
src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
*/
</script>
</head>

jQuery版本 [ 均可从jQuery官网下载 ]
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() 
//隐藏当前元素
$("p").hide() 
//隐藏所有 <p> 元素
$("p.test").hide() 
//隐藏所有 class="test" 的 <p> 元素
$("#test").hide()
//隐藏所有 id="test" 的元素

文档就绪事件
[onload的使用]

所有 jQuery 函数位于一个 document ready 函数中是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

$(document).ready(function(){
   //开始写 jQuery 代码...这个函数会在onload时机执行
});

//简洁写法：
$(function(){
   // 开始写 jQuery 代码...这个函数会在onload时机执行
});

选择器–重点的选择器介绍

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

jQuery 选择器概念

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。
var $obj = $("tagName");

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
var $obj = $("#id");

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。
对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现。
var $obj = $(".class");

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
将函数直接添加到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script src="my_jquery_functions.js"></script>
</head>

“:”冒号的意义举例

通过$(":button")可以选取所有 type="button" 的 <input>元素和<button>元素，如果去掉冒号，$("button")只能获取 <button>元素。

<p id="test1">点进这里测试  <b>button</b></p>
<p id="test2">点进这里测试 <b>:button</b></p>
<button>Button 按钮</button>
<input type="button" value="Input 按钮">

语法	描述
`$("*")`	选取所有的元素
`$(this)`	选取当前 HTML 元素
`$("p.intro")`	选取 class 为 intro 的`<p>`元素
`$("p:first")`	选取第一个`<p>`元素
`$("ul li:first")`	选取第一个`<ul>`元素的第一个`<li>`元素
`$("ul li:first-child")`	选取每个 `<ul>` 元素的第一个 `<li>` 元素
`$("[href]")`	选取带有 href 属性的元素
`$("a[target='_blank']")`	选取所有 target 属性值等于 `"_blank"` 的 `<a>` 元素
`$("a[target!='_blank']")`	选取所有 target 属性值不等于 `"_blank"`的 `<a>` 元素
`$(":button")`	选取所有`type="button"` 的 `<input>` 元素和 `<button>` 元素
`$("tr:even")`	选取偶数位置的 `<tr>` 元素
`$("tr:odd")`	选取奇数位置的 `<tr>` 元素

jQuery 事件

什么是事件？

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时触发 keypress 事件”。
常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常用的 jQuery 事件方法
- $(document).ready()
  该方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。
- click()
  click() 方法是当按钮点击事件被触发时会调用一个函数。
  该函数在用户点击 HTML 元素时执行。
  在下面的实例中，当点击事件在某个<p>元素上触发时，隐藏当前的 <p>元素：
- dblclick()
  当双击元素时，会发生 dblclick 事件。
  dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数.
- mouseenter()
  当鼠标指针穿过元素时，会发生 mouseenter 事件。
  mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
- mouseleave()
  当鼠标指针离开元素时，会发生 mouseleave 事件。
  mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
- mousedown()
  当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
  mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
- mouseup()
  当在元素上松开鼠标按钮时，会发生 mouseup 事件。
  mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
- hover()
  hover()方法用于模拟光标悬停事件。
  当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
- focus()
  当元素获得焦点时，发生 focus 事件。
  当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
  focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
- blur()
  当元素失去焦点时，发生 blur 事件。
  blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

jonny6015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

jQuery简介什么是jQuery？jQuery是一个 JavaScript 函数库。jQuery 极大地简化了 JavaScript 编程，是一个轻量级的“写的少，做的多”的JavaScript库。jQuery 很容易学习。实例：<html><head><script type="text/javascript" src="jquery.js"></script><script
复制链接

扫一扫

专栏目录