1.添加事件函数
-JS
例 html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="切换颜色" />
</body>
</html>
用JS实现这样一种功能,当点击按钮时,背景颜色变成绿色,再点击一下按钮,背景颜色切换成原来的颜色。JS有以下三种方法
① 在html代码中直接添加一个onclick事件,在JS中调用这个事件
html代码:
<input type="button" value="切换颜色" onclick="change1(this)"/>
JS代码
<script>
var div1=document.getElementById("div1");
function change1(){
if(div1.style.backgroundColor!="red"){
div1.style.backgroundColor="red";
}else{
div1.style.backgroundColor="green";
}
}
</script>
方法2 增加一个事件监听
html代码
<body>
<div id="div1"></div>
<input type="button" value="切换颜色" onclick="change1()" id="btn"/>
</body>
js代码
<script>
var div1=document.getElementById("div1");
var btn=document.getElementById('btn');
btn.addEventListener('click',function(){
if(div1.style.backgroundColor!="red"){
div1.style.backgroundColor="red";
}else{
div1.style.backgroundColor="green";
}
})
</script>
3.匿名函数
html与第二个方法一样
js代码如下:
<script>
var div1=document.getElementById("div1");
var btn=document.getElementById('btn');
btn.onclick=function(){
if(div1.style.backgroundColor!="red"){
div1.style.backgroundColor="red";
}else{
div1.style.backgroundColor="green";
}
}
</script>
三个方法的结果如下
点击一下按钮如下图
再点击一下如下图
2.jQuery
例:实现这样一种效果:当点击按钮时,div隐藏,再点击一次按钮,div就会出现
html 代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="button" value="切换颜色" id="btn"/>
</body>
jQuery代码如下
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$("#btn").click(function(){
$("#div1").toggle();
})
</script>
注:想使用jQuery,先引进jQuery,第一行就是一个引入;jQuery中想获取某个元素使用$();的形式
结果如下
当点击按钮时,div隐藏
再点击一次按钮,div又会出现
JS与jQuery对象相互转换
例:实现这样一种效果:当点击按钮时,div隐藏,再点击一次按钮,div就会出现
html 代码
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<input type="button" value="切换颜色" id="btn"/>
</body>
-jQuery对象转换为js对象代码如下
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
var jq = $("#btn");//jQuery获取元素
var js = jq[0];//将jQuery对象转换为js对象
js.onclick=function(){
var div1 = $("#div1")[0];
if(div1.style.display=="none"){
div1.style.display="block";
}else{
div1.style.display="none";
}
}
</script>
-js对象转换为jQuery代码如下
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
var js = document.getElementById("btn");
var jq = $(js);
jq.click(function(){
$(document.getElementById("div1")).toggle();//切换元素的可见状态,如果可见就隐藏;如果隐藏就可见
})
</script>
jQuery如何解决多库冲突
如果代码中有多个数据库,而数据库的顺序如下
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/prototype.js"></script>
此时$代表的不是jQuery,而是prototype,该如何解决这一问题,有三种方法,如下
<script>
//jQuery解决多库问题
//首先先放弃
//方法1
var $j = jQuery.noConflict();//jQuery放弃$(为了简便,可以定义一个变量);
$j("#xcy").hide();//与上行一样
//方法2
jQuery("#xcy").hide();
//方法3
//匿名函数自调用jquery
!function($){
$("#xcy").hide();
}(jQuery);
//函数外部,$代表的不是jQuery,而是prototype
</script>