【JavaWeb-jQuery】笔记（1）--- jQuery概述；dom对象和jquery对象；jQuery选择器；jQuery过滤器
1、介绍：
- jQuery 是一个快速，小巧，功能丰富的 JavaScript 库， 它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
2、dom 对象和 jquery 对象：
- dom 对象，使用 javascript 的语法创建的对象叫做 dom 对象， 也就是 js 对象。
//obj是dom对象，也叫做js对象
var obj = document.getElementById("txt1"); - jquery 对象，使用 jquery 语法表示对象叫做 jquery 对象， 注意 ---> 所有 jquery 表示的对象都是数组。
//jobj就是使用jquery语法表示的对象。 也就是jquery对象，它是一个数组，现在数组中就一个值
var jobj = $("#txt1");- dom 对象可以和 jquery 对象相互转换。
dom 对象可以转为 jquery ，语法： $(dom对象);
jquery 对象也可以转为 dom 对象，语法： 从数组中获取第一个对象，第一个对象就是 dom 对象， 使用[0]或者get{0)。
- 为什么要进行 dom 和 jquery 的转换，目的是要使用 jquery / dom 的方法。
3、选择器：
- 选择器就是一个字符串， 用来定位 dom 对象的，定位了 dom 对象，就可以通过 jquery 的函数操作 dom
常用的选择器：
1）id 选择器，通过 dom 对象的 id 定位 dom 对象的，通过 id 找对象
$("#dom对象的id值");
2）class 选择器，class 表示 css 中的样式，使用样式的名称定位 dom 对象
$(".class样式名);3）标签选择器，使用标签名称定位 dom 对象的
$("标签名称");
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器练习</title>
<style type="text/css">
div{
background: #808080;
width: 150px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1(){
//id选择器
var obj = $("#one");
//使用jQuery中可以改变样式的函数
obj.css("background","red");
}
function fun2(){
//样式选择器
var obj = $(".two");
obj.css("background","blue");
}
function fun3(){
//标签选择器
var obj = $("div");
obj.css("background","orange");
}
</script>
</head>
<body>
<div id="one"></div><br />
<div class="two"></div><br />
<input type="button" value="将第一个div变为红色" onclick="fun1()" />
<input type="button" value="将第二个div变为蓝色" onclick="fun2()"/>
<input type="button" value="将所有div变为橙色" onclick="fun3()"/>
</body>
</html>
4、表单选择器：
- 使用 <input> 标签的 type 属性值，定位 dom 对象的方式
$(":type属性值");
$(":text");//选择的是所有的单行文本框
$(":button");//选择的是所有的按钮
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器练习</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
function fun1(){
//使用表单选择器
var obj = $(":text");
//输出文本框value属性的值,val()是jQuery中的函数,读取value的值
alert(obj.val());
}
function fun2(){
var obj = $(":radio");
for(var i=0;i<obj.length;i++){
//将jQuery对象转为dom对象
var dom = obj[i];
alert(dom.value);
}
}
function fun3(){
var obj = $(":checkbox");
for(var i=0;i<obj.length;i++){
alert(obj[i].value);
}
}
</script>
</head>
<body>
<input type="text" /><br />
<input type="radio" value="man" />男<br />
<input type="radio" value="woman" />女<br />
<input type="checkbox" value="dijia" />迪迦奥特曼<br />
<input type="checkbox" value="oubu" />欧布奥特曼<br />
<input type="checkbox" value="gaiya" />盖亚奥特曼<br />
<input type="button" value="读取text的值" onclick="fun1()"/>
<input type="button" value="读取radio的值" onclick="fun2()"/>
<input type="button" value="读取checkbox的值" onclick="fun3()"/>
</body>
</html>
5、过滤器：
- 过滤器就是过滤条件，对已经定位到数组中的 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
$("选择器:first"): //第一个dom对象
$("选择器:last"): //数组中的最后一个dom对象
$("选择器:eq(数组的下标)");//获取指定下标的dom对象
$("选择器:lt(下标)");//获取小于下标的所有dom对象
$("选择器:gt(下标)");//获取大于下标的所有dom对象
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery过滤器练习</title>
<style type="text/css">
div{
background: grey;
width: 150px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
//当页面中的dom对象加载成功后,会执行ready(),相当于window.onload()
$(document).ready(function(){}): //正常写法
$(function(){})//简写版
*/
$(function(){
//当页面中所有的dom对象加载后,才能给button对象绑定事件
$("#btn1").click(function(){
$("div:first").css("background","red");
})
$("#btn2").click(function(){
$("div:last").css("background","blue");
})
$("#btn3").click(function(){
$("div:gt(3)").css("background","green");
})
$("#btn4").click(function(){
$("div:lt(3)").css("background","purple");
})
$("#btn5").click(function(){
$("div:eq(3)").css("background","white");
})
})
</script>
</head>
<body>
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<div></div><br />
<input type="button" value="作用第一个div(红)" id="btn1"/>
<input type="button" value="作用最后一个div(蓝)" id="btn2"/>
<input type="button" value="作用下标大于3的div(绿)" id="btn3"/>
<input type="button" value="作用下标小于3的div(紫)" id="btn4"/>
<input type="button" value="作用下标等于3的div(白)" id="btn5"/>
</body>
</html>
6、表单属性过滤器：
- 根据表单中 dom 对象的状态情况，定位dom对象
- 选择可用的文本框：
$(“:text:enabled”);- 选择不可用的文本框：
$(“:text:disabled”);
- 复选框选中的元素：
$(“:checkbox:checked”);- 选择指定下拉列表的被选中元素：
选择器>option:selected;
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
$(document).ready(函数);//当页面中的所有dom对象加载成功后,会执行ready()，相当于window.onload()
$(function(){});//也可以简写为这种形式
*/
$(function(){
$("#btn1").click(function(){
//获取所有可以使用的文本框
var obj = $(":text:enabled");
//修改jQuery数组中所有dom对象的value值
obj.val("就无语~~");
})
$("#btn2").click(function (){
//获取所有选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert(obj[i].value);也可以这么写
alert($(obj[i]).val());
}
})
$("#btn3").click(function (){
//获取下拉列表已被选中的值
//var obj = $("select>option:selected");
var obj = $("#language>option:selected");
alert(obj.val());
})
})
</script>
</head>
<body>
<input type="text" value="本博主王狗蛋帅气逼人" disabled /><br />
<input type="text" value="你同意吗？" disabled /><br />
<input type="text" value="我非常认可王先生的看法"/><br />
<input type="text" value="滚啊,普信男..."/><br />
<input type="checkbox" value="老八蜜汁小汉堡" checked />老八蜜汁小汉堡<br />
<input type="checkbox" value="老坛酸菜牛肉面" />老坛酸菜牛肉面<br />
<input type="checkbox" value="双汇淀粉肠" />双汇淀粉肠<br />
<select id="language">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<input type="button" id="btn1" value="将可以修改的文本框的vulue修改为 就无语~~"/>
<input type="button" id="btn2" value="显示已被选中的复选框的值"/>
<input type="button" id="btn3" value="显示已被选中的下拉列表框的值"/>
</body>
</html>
