HTML学习笔记（8）- jQuery基础

最新推荐文章于 2021-08-26 13:43:45 发布

瓜波牛排

最新推荐文章于 2021-08-26 13:43:45 发布

阅读量249

点赞数

分类专栏： HTML学习笔记分享文章标签： jquery html javascript

本文链接：https://blog.csdn.net/Amigo_1997/article/details/108098066

版权

HTML学习笔记分享专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、认识jQuery语法：

jQuery是一个开源的、轻量级的JavaScript脚本库。它将一些工具方法或对象方法封装在类库中，提供了强大的功能函数和丰富的用户界面设计能力。

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

$(selector).action()

其中，$表示jQuery， selector表示相应HTML元素， action表示执行对元素的某种操作。

例如： $(“p”).hide()——隐藏所有段落 $(“#test”).hide()——隐藏所有id=test的元素

$(“#id_img”).attr("src)—获得元素的src 属性值 removeAttr（）是移除属性

例子：在图片上点击后在div中显示出图片的文件名

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.js"></script>
<script>
 $(document).ready(function(){
    $("#id_img").click(function() {
      $("#div_filename ").text($("#id_img").attr("src"));
     });
  });
</script>
</head>
<body>
   <img id="id_img" src="dog.jpg"  height="400" width="600">
   <div id="div_filename">div_filename</div>
</body>

<!-- 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 -->

效果：

点击鼠标后

二、CSS样式控制

（1）使用css() 方法获取CSS属性的语法如下：

值 = jQuery对象.css（属性名）；

使用css() 方法设置CSS属性的语法如下：

jQuery对象.css（属性名，值）；

（2）与CSS类别有光的方法

jQuery对象.addClass（className）可以为匹配的HTML元素添加类别属性

例子：向第一个<p>元素添加一个类别“intro”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p:first").addClass("intro");
	});
});
</script>
<style>
.intro{
	font-size:150%;
	color:red;
}
</style>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<button>单击=添加类名</button>
</body>
</html>

效果：

单击按钮后

例子：用removeClass（）移除一个类别“intro”，并增加一个新的类别

关键语句：$("p:last").removeClass("intro").addClass("main");

<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p:last").removeClass("intro").addClass("main");
	});
});
</script>
<style>
.intro{	color:red;}
.main{	background-color:yellow;}
</style>
</head>
<body>
<p>这是第一个段落。</p>
<p class="intro">这是第二个段落。</p>
<button>修改第二个P元素的类名</button>
</body>
</html>

效果：

单击按钮后

另外还有两个常用的函数：

hasClass（）判断匹配的元素是否拥有指定的类别，如果有则返回True；

toggleClass（）执行类别转换操作，如果不存在则添加class类别，如果存在则删除这个class类别。

三、获取和设置HTML元素的尺寸

例：通过连个按钮获取HTML段落、文档的高度信息

<html>
<head>
   <style>
   button { font-size:12px; margin:2px; }
   p { width:150px; border:1px red solid; }
   div { color:red; font-weight:bold; }
   </style>
   <script src="jquery.js"></script>
</head>

<body>
   <button id="getp">获取段落尺寸</button>
   <button id="getd">获取文档尺寸</button>
   <!--&nbsp == 不换行空格  -->  
   <div>&nbsp;</div>             
   <p>用于测试尺寸的段落。</p>
   <script>  
   function showHeight(ele, h) {
      $("div").text(ele + " 的高度为 " + h + "px." );
     }
   $("#getp").click(function () {
      showHeight("段落", $("p").height());
      });
   $("#getd").click(function () {
      showHeight("文档", $(document).height());
      });
   </script> 
</body>
</html>

效果：

另外：offset()为元素在当前窗口中的相对偏移坐标 position()为元素相对父类元素的偏移坐标

四、事件和event对象

例：通过鼠标移动事件获取鼠标位置坐标信息

<html>
<head>
  <meta charset="utf-8">
  <style>
      div { color:red; }
  </style>
  <script type="text/javascript" src="jquery.js"></script>    
</head>

<body>
<div id="log"></div>
<script>
   $(document).mousemove (function(e){
      $("#log").text("鼠标X: " + e.pageX + ", 鼠标Y: " + e.pageY); 
});
</script>
</body></html>

例：通过使用bind方法给按钮绑定事件处理函数

<html>
<head>
  <script type="text/javascript" src="jquery.js"></script>
  <script>
    function handler(event) {
      alert(event.data.sex);
    }
    $(document).ready(function(){
       $("input").bind("click", { sex: "男" }, handler);
    });
  </script>
</head>
<body>
  <input id="name"></<input >
</body>
</html>

效果：

点击一下鼠标后：

例：获取键盘按键的ASCII码

keydown()表示按下按键时触发事件 keyup()表示放开按键时触发事件

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});
</script>
</head>
<body>请随意键入一些字符：<input type="text" />
    <p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
    <div />
</body>
</html>

效果： (event.which会显示ASCII码）

例：当鼠标指针进入、离开元素时改变元素的背景色

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","#E9E9E4");
  });
});
</script>
</head>
<body>
<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上</p>
</body>
</html>

效果：

移动后

例：文档加载事件

（1）load表示加载文档时触发（2）ready表示所有文档加载完成时触发（3）unload表示离开一个页面时触发

如：页面离开的时候弹出警告

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(window).bind('beforeunload', function() {
   var message = "I'm really going to miss you if you go.";
   return message;
   });
});
</script>
</head>
<body>
<p>当您点击 <a href="http://w3school.com.cn">这个链接</a> 时，会触发一个警告框。</p>
</body>
</html>

效果：

瓜波牛排

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记（8）- jQuery基础

一、认识jQuery语法： jQuery是一个开源的、轻量级的JavaScript脚本库。它将一些工具方法或对象方法封装在类库中，提供了强大的功能函数和丰富的用户界面设计能力。 jQuery语法是为选取HTML元素而编制的，可以对元素执行某些操作，jQuery基本语法是： $(selector).action() 其中，$表示jQuery， selector表示相应HTML元素， action表示执行对元素的某种操作。例如：$...
复制链接

扫一扫