JQuery基础学习笔记

 在页面设置弹窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
  
    </div>
  <!-- 利用javascript设置弹窗事件 -->
    <script type="text/javascript">
        function myFunc() {
            alert("hello")
        }
    </script>

</body>
</html>

JQuery选择器操作(直接寻找)

<h1 class="c1">中国联通</h1>
<h1 id="txt">中国联通</h1>
<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>
<div class="c3">
	<div class="c4">
		<h1>123</h1>
		<li>456</li>
	</div>
</div>
<input type="text" name="n1" />
<input type="text" name="n2" />
<input type="text" name="n3" />

<!-- ID选择器 -->
$("#txt")
<!-- 类选择器 -->
$(".c1")
<!-- 标签选择器 -->
$("h1")
<!-- 多类选择器-->
$(".c1 .c2 h1")
<!-- 属性选择器 -->
$("input[name='n1']")



JQuery选择器操作(间接寻找)

找兄弟

<div>
	<div>北京</div>
	<div id="c1">上海</div>
	<div>深圳</div>
	<div>广州</div>
</div>
<!-- JQuery操作 -->
$("#c1").prev()			//上一个标签
$("#c1")				
$("#c1").next()			//下一个标签
$("#c1").next().next()	//下一个的下一个标签
$("#c1").siblings()		//所有兄弟的标签

找父子

<div>
	<div>
		<div>北京</div>
		<div id="c1">
			<div>浦东新区</div>
			<div>静安区</div>
			<div>奉贤区</div>
		</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
	<div>
		<div>北京</div>
		<div id="c1">上海</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
</div>

<!-- JQuery操作 -->
$("#c1").parent()			//父亲
$("#c1").parent().parent()	//父亲的父亲

$("#c1").children()			//所有的儿子
$("#c1").children(".p10")	//所有的儿子中寻找class=p10

$("#c1").find(".p10")		//所有的子孙中寻找class=p10
$("#c1").children("div")	//所有的儿子中寻找标签 div

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值