码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习-w3cschool-(1)jQuery 教程

时间:2020-02-10 00:20:39      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:查询   selector   script   特性   type   int   代码   学习   定义   

一、jQuery 简介

(1)???使用 Google 的 CDN引入jQuery库:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>



(2)???使用 Microsoft 的 CDN引入jQuery库:

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



(3)???jQuery 库包含以下特性:
??HTML 元素选取
??HTML 元素操作
??CSS 操作
??HTML 事件函数
??JavaScript 特效和动画
??HTML DOM 遍历和修改
??AJAX
??Utilities

二、jQuery 语法

(1)基础语法:
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
$定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作


(2)文档就绪函数:

$(document).ready(function(){
--- jQuery functions go here ----
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。//若将jq库文件放在body底部则可不用该函数(?)

三、jQuery 选择器

(1)jQuery 元素选择器:
eg.$("p") 选取<p>元素。
$("p.intro") 选取所有 class="intro" 的<p>元素。
$("p#demo") 选取所有 id="demo" 的<p>元素。
$("div#intro .head") 选取id="intro" 的<div>元素中的所有 class="head" 的元素。
$("ul li:first") 选取每个<ul>的第一个<li>元素//second和third不行?
$(this) 选取当前 HTML 元素。


(2)jQuery 属性选择器:
eg.$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。


(3)jQuery CSS 选择器:
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
eg.$("p").css("background-color","red");//仅限css属性,不包括标签属性

三、jQuery 事件

jQuery 是为事件处理特别设计的。
(1)jQuery 事件函数:
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到<head>部分的事件处理方法中。

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



(2)jQuery 事件
下面是 jQuery 中事件方法的一些例子:
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件

四、测试实例

测试实例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//$("p.123").fadeOut("normal");
//$("p#345").fadeOut("fast");
//$("div p:first").fadeOut("fast");
$(this).css("font-weight","bold");
//$("div#234 .123").fadeOut("fast");
$("[title=123]").fadeOut("fast");
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<div id="234">
<p id="345">This is a paragraph.</p>
<p class="123" title="123">This is another paragraph.</p>
<p class="123">This is 2 paragraphs.</p>
</div>
<div id="456">
</div>
<button type="button">Click me</button>
</body>
</html> 

jQuery学习-w3cschool-(1)jQuery 教程

标签:查询   selector   script   特性   type   int   代码   学习   定义   

原文地址:https://www.cnblogs.com/caihan/p/12289316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!