关于jQuery

最新推荐文章于 2021-03-12 15:30:05 发布

Super戏子

最新推荐文章于 2021-03-12 15:30:05 发布

阅读量128

点赞数

分类专栏： Java基础篇

本文链接：https://blog.csdn.net/qq_41213748/article/details/79574473

版权

Java基础篇专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一：jQuery简介

jQuery是一个JavaScript库，$就是jQuery的一个简写形式。

eg:$(“#foo”)和jQuery(“#foo”)是等价的；$.ajax和jQuery.ajax是等价的。

二：DOM对象与jQuery对象

DOM对象与jQuery对象：
通过JavaScript中的getElementsByName、getElementById等方法获取元素节点，得到的就是DOM对象。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

DOM对象与jQuery对象的相互转换：

一个约定：如果获取的对象是jQuery对象，那么在变量前面加上$，例如：
var $variable = jQuery对象。
如果获取的是DOM对象，则定义如下：
var variable=DOM对象

1.DOM对象转换成jQuery对象

对于一个DOM对象，只要用$( )把DOM对象包装起来，就可以获得一个jQuery对象了。即：$(DOM对象)。

2. jQuery对象转换成DOM对象
方式一：
由于jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。eg:
var $a = $(“#a”);
var a=$a[0];
方式二：
通过jQuery对象本身提供的get(index)方法。eg:
var $a=$(“#a”);

var a=$a.get(0);

三：$(document).ready(function(){})

在jQuery中，通过使用：
$(document).ready(function(){
// DOM结构绘制完毕后执行此处代码
});
可以编写DOM结构绘制完毕后执行的代码
该结构也可简写成：
$(function(){
// DOM结构绘制完毕后执行此处代码

});

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的第一个jQuery网页</title>
	<!--引入jQuery库-->
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	    $(function(){
	    	alert("hello,欢迎学习jQuery!");
	    });
	</script>
</head>
<body>
	
</body>
</html>

运行结果图：

四：jQuery选择器

(1)id选择器 $(#ID名称)
eg:
$( "#myDiv").css( "border", "3px solid red" );

此代码对应JavaScript的： document.getElementById(" myDiv ").style.border='3px solid red';

(2)通用选择器 $("*" )

(3)类选择器 $(".class")

(4).复选框选择器 $(":checkbox" )

(5)后代选择器 $( "ancestor descendant" )

(6)子选择器 $("parent > child" )

(7)多元素选择器 $( "selector1, selector2, selectorN" )

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器</title>
	<style type="text/css">
	    .divclass{
            width:200px;
            height:200px;
            background-color: yellow;
	    }
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	    $(function(){
	    	/**
            $("#btn").click(function(){
            	$("#mydiv").css("background-color","red");
            });
            **/
            $("*").css("background-color","#FAEBD7");

            $("#btn").bind("click",function(){
            	$("#mydiv").css("background-color","#aabbcc");
            });

            $("#btn2").click(function(){
            	$(".divclass").css("background-color","red");
            });
	    });
	</script>
</head>
<body>
	<div id="mydiv" class="divclass"></div>
	<input type="button" value="ID点击变色" id="btn"/>   <br/><br/>
	<input type="button" value="class点击变色" id="btn2">
	<div class="divclass"></div>
</body>
</html>

运行结果图：

五：事件冒泡

当在有包含关系的DOM层级上绑定事件时，事件会按照DOM层级结构顺序从内到外依次触发,这就是“事件冒泡”。
停止事件冒泡的方法：
在事件处理函数中加上event事件对象，调用event事件对象的stopPropagation()方法。
补充：阻止默认行为也是用event事件对象：
event.preventDefault();

eg1:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<style type="text/css">
	    #parentDiv{
	    	width:400px;
	    	height:400px;
	    	background-color:#7FFF00;
	    }
	    #childDiv{
	    	width:200px;
	    	height:200px;
	    	background-color:yellow;
	    	margin:50px auto;
	    }
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	    $(function(){
             $("#parentDiv").bind("click",function(){
                    alert("parentDiv被点击了");
             });
             $("#childDiv").bind("click",function(event){
                    alert("childDiv被点击了");
                    event.stopPropagation();   // 停止事件冒泡    
             });
             $("body").bind("click",function(){
             	    alert("body被点击了");
             });
	    });
	</script>
</head>
<body>
	<div id="parentDiv">
	     这是parentDiv里的内容
         <div id="childDiv">
              这是childDiv里的内容
         </div>
         这是parentDiv里的内容
	</div>
    

</body>
</html>

运行结果图：

eg2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止默认行为</title>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	    $(function(){
	    	
             $("#registerForm").bind("submit",function(event){
             	    var username=$("#uname").val();
                    var password=$("#upwd").val();
                    if(username==""){
             	            alert("用户名不能为空！");
                            event.preventDefault();   // 阻止提交表单的默认行为
                     }
                     if(password.length<6){
                     	    alert("密码不能小于6位！");
                            event.preventDefault();   // 阻止提交表单的默认行为
                     }
             });


             
	    });
	</script>
</head>
<body>
	<form action="serverURL" method="post" id="registerForm">
     注册用户名：<input type="text" name="uname" placeholder="请输入用户名" id="uname"/>
  <br/> <br/>
  注册密码：<input type="password" name="pwd" placeholder="请输入密码" id="upwd">  
  <br/> <br/>
  <input type="submit" value="注册"/>  <input type="reset" value="重置"/>
	</form>
</body>
</html>

运行结果图：