一、概念:
jQuery 是一个 JavaScript 函数库,简化了 JavaScript 编程。
二、功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- Jquery还提供了大量的插件
- jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!
三、下载与安装:
下载:www.jquery.com 版本:jquery-3.1.1.min.js 压缩版大小为85kb
安装方式:(注:在使用离线的时候应将jquery-3.1.1.min.js软件与代码放在一个文件夹中,我的两次异常问题就在这里)
1.在线:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
2.离线:<script src="jquery-3.1.1.min.js"></script>
图片隐藏淡入淡出效果:
<!DCOTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*window.onload = function(){
var p2 = document.getElementById("p2");
p2.style.color="red";
p2.innerHTML="更换p2内容";//HTML需大写
var b1 = document.getElementById("btn");
//alert(b1);
//以数组形式返回具有相同元素名的所有节点元素
var img = document.getElementsByTagName("img");
b1.onclick = function(){
//img[0].style.display="none";//隐藏元素 - display:none(不占位)或visibility:hidden
}
}*/
//文档元素加载完成执行jquery代码
$(function(){
/*
一、操作样式 css
1>设置单个样式
语法 :$(selector).css("样式名","样式值");
2>设置多个样式
语法 :$(selector).css({"样式名1":"样式值1","样式名2":"样式值2"});
*/
$("#p1").css("color","red");
$("#p1").css({"color":"blue","font-size":"28px"});
/*
二、操作内容
语法 :$(selector).html("内容");
*/
$("#p1").html("新的jquery程序内容");
//三、操作属性attr - 获取属性
var src = $("img").attr("width");
/*
操作属性attr -设置属性
1>设置单个属性
语法 :$(selector).attr("属性名","属性值");
2>设置单个属性
语法 :$(selector).attr({"属性名1":"属性值1","属性名2":"属性值2"});
*/
$("img").attr({"width":"300px","height":"400px"});
//四、事件操作
/*
点击事件
语法 : $(selector).click(function(){
//事件处理代码
})
*/
$("#btn").click(function(){
//五、实现元素隐藏/显示
//可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
// $("img").fadeToggle(2000);//淡入淡出效果
// $("img").toggle(2000);//隐藏显示效果
//等价于
// $("img").fadeToggle(2000).toggle(2000);
//淡入淡出效果结束后执行隐藏显示效果
$("img").fadeToggle(2000,function(){
$("img").toggle(2000);
})
})
})
</script>
</head>
<body>
<p id="p2">javascript程序</p>
<p id="p1">第一个jQuery程序</p>
<img src="E:/java1606/November/WEB/css/day18/html和css测试/image/4.jpg">
<button id="btn">隐藏图片</button>
</body>
</html>
表单学习:用户名和密码的判断:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表单学习</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
/*window.οnlοad=function(){
var userName = document.form1.userName.value;
}
//文档元素加载完成执行jquery代码
$(function(){
$("#user").val("张三");//设置表单元素值
var user = $("#user").val();//获取表单元素值
alert(user);
})*/
function check(){
var user = $("#user").val(); //获取表单元素值
var psw = $("#psw").val();
//$("#msg").show();
if(user=="admin" && psw == "123"){
$("#msg").html("登录成功!");
return true;
}else{
$("#msg").text("用户名或密码不正确定!");
return false;
}
}
</script>
</head>
<body>
<div>
<form name="form1" action="jquery2_属性_内容_样式.html" method="get" οnsubmit="return check()">
用户名:<input id="user" type="text" name="userName" placeholder="请输入用户名"/><br><br>
密 码:<input id="psw" type="password" name="passWord" placeholder="请输入用户名密码"/><br><br>
<input type="submit" value="提交"/>
<span id="msg"></span>
</div>
</body>
</html>