2021-09-10jQuery事件、选择器、语法基础使用方法小结

一、语法

$(document).ready( function  (){

//开始写jquery代码

});

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jquery</title> 

<script src="/jquery.min.js">
</script>
<script>  //引入的js文件

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});  
</script>     //jquery书写代码阶段

</head>
<body>

<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

二、选择器

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

2.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 css选择器https://www.runoob.com/cssref/css-selectors.html除此之外,它还有一些自定义的选择器。

3.jQuery 中所有选择器都以美元符号开头:$()。

例:

<script src="/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){    //给指定标签(按钮、元素)添加动作,此处为单击
    $("p").hide();      //动作作用的对象,此处为p标签
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

其他标签汇总

$("*")选取所有的元素
$("p:first")选取第一个p标签元素
$("p.p1")

选取class="p1"的p元素

$("a[target='blank']")选取target属性为blank的a标签
$("this")选取当前HTML元素
$("[href]")选取带有href属性的所有元素
$(":[button]")选取所有 type="button" 的 <input> 元素 和 <button> 元素
......

三、事件

1.什么是事件?

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

例:

在元素上移动鼠标。

选取单选按钮

点击元素

2.点击动作汇总

鼠标事件键盘事件表单事件文档/窗口事件
click  单击keypress  键盘按下submit  提交显示load  负荷
dblclick  双击keydown  change  改变警报resize  调整
monseenter  穿过元素keyup按键抬起focus聚焦scroll  滚动
hover    鼠标悬停blur失焦unload  卸载 

<script>
$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
});
</script>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值