jQuery 学习笔记之一

最新推荐文章于 2022-08-21 17:46:10 发布

HorseRunningNoStop

最新推荐文章于 2022-08-21 17:46:10 发布

阅读量360

点赞数

本文链接：https://blog.csdn.net/HorseRunningNoStop/article/details/51425835

版权

1、jQuery库引用

<head>
<script src="jquery.js"></script>
</head>

2、jQuery语法使用示例

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

3、选择元素的方法（选择器）

语法	描述
$(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" 的元素

$("p") 选取 <p> 元素。

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

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

<strong>$("p").css("background-color","red"); </strong> //<span style="font-family: Verdana, Arial, 宋体; font-size: 12px; line-height: 18px; background-color: rgb(249, 249, 249);">所有 p 元素的背景颜色更改为红色</span>

4、事件（执行动作）

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

事件处理放置在单独的.js文件中：

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

例子：为方便，所有事件代码均放置在head中。

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

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

参照：http://www.w3school.com.cn/jquery/jquery_events.asp