WEB前端知识大整合之Jquery入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$(":text").css("background-color","#FF0000");
$("#btn1").click(function(){
$("select option:selected").css("background-color","chartreuse");
alert($("option:selected").size());
});
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<input type="button" value="点我" id="btn1" />
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
层级选择器、父子级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
-- 子元素选择器: 选择器1 > 选择器2
- 后代选择器: 选择器1 儿孙
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="找出body下面的子div" id="btn1" />
<input type="button" value="找出body下面的所有div" id="btn2" />
<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>
基本过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
选择器:first
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="过滤出所有div中第一个元素" id="btn1" />
<input type="button" value="过滤出所有div中偶数位的div" id="btn2" />
<input type="button" value="过滤出所有div中奇数位的div" id="btn3" />
<input type="button" value="过滤出所有div中找出索引大于2" id="btn4" />
<br />
<div id="one"> <!-- 0 -->
<div class="mini">1-1</div> <!-- 1 -->
</div>
<div id="two"> <!-- 2 -->
<div class="mini">2-1</div> <!-- 3 -->
<div class="mini">2-2</div> <!-- 4 -->
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>
基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器,选择器: 选择器1,选择器2
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$("#btn1").click(function(){
$("#two").css("background-color","palegreen");
});
//找出mini类的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*选择器分组*/
//找出mini类 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="找出ID为two的元素" id="btn1" />
<input type="button" value="找出mini类的所有元素" id="btn2" />
<input type="button" value="找出所有div元素" id="btn3" />
<input type="button" value="通配符选择器" id="btn4" />
<input type="button" value="找出mini类 和 span元素" id="btn5" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//通过属性选择器去找到 a href
// $("a[href]").css("color","red"); //只有一个属性
//找出包含 href ,title
// $("a[href][title]").css("color","red"); // 多个属性
//找出包含herf title 并且 title ='testTitle'
$("a[href][title='testTitle']").css("color","deeppink"); //多个属性 ,并且指定值
});
</script>
</head>
<body>
<a href="#">herf 111</a>
<br />
<a href="#" title="testTitle">herf 222</a>
</body>
</html>
JQ查找元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//文档加载顺序
$(function(){
$("#div1").html("李四");
// div1.innerHTML = "王五";
});
// alert($("#div1"));
</script>
</head>
<body>
<div id="div1">张三</div>
</body>
</html>
JQ入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导包,引入JQ的文件-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>
</head>
<body>
</body>
</html>
JQ和JS互换对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
function changeJS(){
var div = document.getElementById("div1");
// div.innerHTML = "JS成功修改了内容"
//将JS对象转成JQ对象
$(div).html("转成JQ对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
// $("#div1").html("JQ方式成功修改了内容");
//将JQ对象转成JS对象来调用
var $div = $("#div1");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";
});
});
</script>
</head>
<body>
<input type="button" value="JS修改div内容" onclick="changeJS()" />
<input type="button" value="JQ方式修改div内容" id="btn2" />
<div id="div1">
这里的内容一会要被JS/JQ代码修改掉
</div>
<div id="div1">
这里的内容一会要被JS/JQ代码修改掉1111
</div>
</body>
</html>
动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//显示页面图片
//给按钮绑定事件
$("#btn1").click(function(){
// $("#img1").show();
// $("#img1").slideDown();
// $("#img1").fadeIn(5000);
$("#img1").animate({ width:"800px",opacity:"1"},5000);
});
//隐藏页面图片
$("#btn2").click(function(){
//获得img
// $("#img1").hide(10000);
// $("#img1").slideUp(500);
// $("#img1").fadeOut(5000);
$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
});
});
</script>
</head>
<body>
<input type="button" value="显示" id="btn1" />
<input type="button" value="隐藏" id="btn2"/> <br />
<img src="../../img/333.png" id="img1" width="500px" />
</body>
</html>
微信公众号
