jQuery的介绍和简单实用

1.jQuery是一个JavaScript 函数库
特点：代码写得少，用的地方多，为事件处理特别设计。即以更简约的代码完成需求。
2.选择器：

（1）过滤选择器，如 $(“ f i r s t ”) （ 2 ）元素选择器，如$ (“span”)
（3）#id选择器，如 $KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲t”) （4）.class选择\dots$ (“.t”)
（5）组合选择器，如$(“#t,.t”)

共同点：jQuery 中所有选择器都以美元符号开头：$()。

3.基础语法：
$(“ 操作对象名 ”) . 操作名 () 如，$ (this).click()
4.一个是基于元素选择器实现语句覆盖的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实现点击覆盖</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    
    
  $("button").click(function(){
    
    
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>代码优化</h2>
<p>被覆盖代码</p>
<p id="test">覆盖代码</p>
<button>点我覆盖</button>
</body>

</html>

5.常用的事件方法：

（1）$(document).ready()
用于改变函数执行时间，使得函数在文档完全加载后再执行
（2）click()：单击事件
（3）dblclick()：双击事件
（4）hover()：光标悬停事件
（5）mouseenter()：鼠标指针靠近事件

mouseenter 的实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>

jQuery的介绍和简单实用

猜你喜欢