jquery 入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 引入jQuery库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
//入口函数$(document).ready(function())
//$(document).ready(function())--简写：$(function())
/**
* jQuery的入口函数是在网页上的DOM树结构加载完毕就能执行，不必等待元素中的内容加载完毕，
* jQuery的入口函数可以写多个(多个入口函数按照顺序执行)。
* 注意:jQuery是对原生的js进行高度封装后的js库，可以很方便的代替原生js代码;
* $等价于jQuery
*/
/* $(document).ready(function(){
alert('hello');
});*/
/* $(function(){
alert("hello");
});*/
$(function(){
// alert("world");
// document.body.style.backgroundColor="green";
$(document.body).css("background-color","red");
});
</script>
</body>
</html>
基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>我是第一个div</div>
<div>我是第二个div</div>
<div id="txt">我是第三个div</div>
<!-- jQuery的基本选择器：就是原来css学习的那几种基础选择器
语法：$(CSS选择器)
比如：$("#txt")获取网页上id=txt的元素
-->
<!-- 引入jQuery库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
$('div').css("color","red");
$("#txt").css("color","blue");
</script>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>我是div1</div>
<p>我是p元素</p>
<div id="parent">
<span>第1个span</span>
<div id="child">
<span>第2个span</span>
</div>
<span>第3个span</span>
</div>
<!-- jQuery的关系选择器：就是原来css学习的那几种关系选择器
语法：$(CSS选择器)
比如：$("div,p")获取网页上所有div和p元素
-->
<!-- 引入jQuery库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
$('div,p').css("color", "red");
$('#parent>span').css("color","blue");
</script>
</body>
</html>
过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入jQuery库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
/* 过滤选择器:
* :first()：选择第一个元素
* :last():选择最后一个元素
* :not(css选择器)：选择除了给定选择器匹配元素以外的所有元素
* :even:选择所有索引为偶然的元素，索引从0开始
* :odd:选择所有索引为奇然的元素，索引从0开始
* :eq(index):选择索引为index的元素，索引从0开始
* :gt(index):选择索引大于index的元素，索引从0开始
* :lt(index):选择索引小于index的元素，索引从0开始
* :ge(index):选择索引大于等于index的元素
* :le(index):选择索引小于等于index的元素
* */
$(function(){
//选中第1个li元素
// console.log($("li:first"));
// $("li:first").css("color","blue");
//$("li:not(#five)").css("color","green");
// $("li:even").css("color","green");//第1,3,,5,7个元素被选中
// $("li:odd").css("color","red");//第2,4,6个元素被选中
// $("li:eq(5)").css("color","red");
//$("li:gt(0)").css("color","red");
$("li:lt(4)").css("color","red");
})
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li id="five">我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p title="aa">我是段落</p>
<p title="cc">我是段落2</p>
<h2 title="bb">我是h2元素</h2>
<h2 title="cc">我是第2个h2元素</h2>
<!-- 引入jQuery的库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
/*属性选择器:根据元素的属性来选择元素
语法1：$([attr]):选择网页上具有attr属性的所有元素，不用管attr属性的值
语法2：$(E[attr]):选择具有attr属性的所有E元素,不用管attr属性的值
语法3：$(E[attr=value]):选择具有attr属性且属性值是value的所有E元素
语法4：$([attr=value]):选择具有attr属性且属性值是value的所有元素
注意：如果属性值value没有/及：等特殊字符，那么value可以不用双引号包裹
**/
// $('h2[title]').css("color","red");
$("[title=cc]").css("color","red");
</script>
</body>
</html>
表单对象选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
用户名：<input type="text" name="uname" /><br>
密码：<input type="password" name="upwd" /><br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女<br>
爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="deskball" checked/>台球
喜欢的城市：<select name="city" multiple>
<option value="wuhan">武汉</option>
<option value="beijing" selected>北京</option>
<option value="shanghai" selected>上海</option>
</select><br>
个人介绍：<textarea name="disc" rows="10" cols="50"></textarea>
<input type="button" value="普通按钮1" />
<button type="button">普通按钮2</button>
<input type="submit" value="提交按钮" />
</form>
<script src="../js/jquery.min.js"></script>
<script>
/**
* :input:获取表单中所有的<input>、<textarea>、<select>和<button>元素
* 在控制台打印jQuery对象的数组时，显示m.fn.init[长度]
* :text:获取表单中所有单行文本框
* :password:获取所有密码框
* :radio:获取所有单选框
* :checkbox:获取所有的多选框
* :submit 获取所有的提交按钮
* :checked:获取单选框和复选框中所有被选中的元素，写法：$("input:checked")
* :selected:获取下拉列表中所有被选中的<option>选项元素
*/
// console.log ($(":input"));
//console.log($(":text"));
// console.log($("input:checked"));
console.log($(":selected"));
</script>
</body>
</html>
2452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
