jQuery
jQuery的页面加载
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的使用方式title>
<script type="text/javascript" src="js/jquery-3.4.1.js" >script>
<script type="text/javascript">
jQuery(document).ready(function(){
alert("这是最原始的方式");
});
$(document).ready(function(){
alert("这是第二种方式");
});
$(function(){
alert("这是第三种方式");
});
script>
head>
<body>
body>
html>
DOM对象与jQuery对象转换
DOM对象：原生JS方法获取的对象
jQuery对象：通过jQuery方法获取的对象
两种对象的属性与方法不能混用
1、DOM 对象转成 jQuery 对象
var obj = document.getElementById("obj"); //DOM对象
var $obj = $(obj); //jQuery 对象
即：把js对象括号 然后前面加上$符号。
2、jQuery 对象转成 DOM 对象
var $obj = $("#obj"); //jQuery 对象
var obj = $obj.get(0); //DOM对象 ( $obj[0] 也可以 )
<html>
<head>
<meta charset="UTF-8">
<title>jQuery对象与JS对象title>
<script type="text/javascript" src="js/jquery-3.4.1.js" >script>
<script type="text/javascript">
$(function(){
var input1 = document.getElementById("username");
var input2 = $("#username");
var input1jQuery = $(input1);
var input2DOM1 = input2[0];
var input2DOM2 = input2.get(0);
var input1 = document.getElementById("username").value;
var input2 = $("#username").val();
alert(input1+","+input2);
});
script>
head>
<body>
<input type="text" id="username" value="陈微"/>
body>
html>
jQuery选择器
jQuery选择器分类：
1、基本选择器
2、层级选择器
3、过滤选择器
4、属性选择器
5、表单选择器
1、基本选择器
使用频率最高的选择器
主要有：ID选择器，类选择器，标签选择器，全局选择器
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("#testid").css("color","red");
$(".testclass").css("color","orange");
$("div").css("color","green");
$("*").css("background-color","blue");
});
script>
head>
<body>
<div id="testid">这是测试ID选择器的div>
<div class="testclass">这是测试类选择器的div>
<p class="testclass">这是测试类选择器的P标签p>
body>
html>
2、层次选择器
主要的关系：父子关系，兄弟关系，子孙关系
主要有：后代选择器，子元素选择器，同辈选择器，同辈相邻选择器
1)后代选择器：parent child，使用空格。后代的特点：儿子，孙子，曾孙子...
2)子元素选择器：parent>child，使用>隔开。获取的是儿子元素
3)同辈元素选择器：兄~后面的同辈，使用~隔开。
4)同辈相邻元素选择器：兄+后面相邻的同辈元素，使用+隔开。注意：如果紧挨在兄后面的不是 你指定的元素，那么就不会选中。
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("#big span").css("color","red");
$("#big>span").css("color","pink");
$("#big~*").css("color","purple");
$("#big+span").css("color","yellow");
});
script>
head>
<body>
<div id="big">
这是最大的DIV
<p>
<span>这是div中的p标签中的spanspan>
p>
<h1>这是div中的h1h1>
<span>这是div中的spanspan>
div>
<span>这是div后面的spanspan>
<h2>这是div后面的后面的h2h2>
body>
html>
3、过滤选择器
常用的过滤选择器：
:first 第一个
:last 最后一个
:eq(index) 根据指定的索引index来获取元素
:gt(index) 获取索引大于index的元素
:lt(index) 获取索引小于index的元素
:odd 获取索引为奇数的元素
:even 获取索引为偶数的元素
:not() 获取不是***的元素
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("div:first").css("color","red");
$("div:last").css("color","#008000");
$("div:eq(4)").css("color","yellow");
$("div:gt(4)").css("color","blue");
$("div:lt(4)").css("color","pink");
$("div:odd").css("color","orange");
$("div:even").css("color","orchid");
$("div:not(.test)").css("color","darkgoldenrod");
});
script>
head>
<body>
<div>第一个divdiv>
<div>第二个divdiv>
<div>第三个divdiv>
<div>第四个divdiv>
<div class="test">第五个divdiv>
<div>第六个divdiv>
<div>第七个divdiv>
<div>第八个divdiv>
<div>第九个divdiv>
body>
html>
4、属性选择器
根据标签的属性及属性值进行查询
[attribute] 选中含有某属性的元素
[attribute=”某值”] 选中含有某属性且该属性值为某值的元素
[attribute!=”某值”] 选中含有某属性且该属性值不为某值的元素
[attribute^=”某值”] 选中含有某属性且该属性值以某值开头的元素
[attribute$=”某值”] 选中含有某属性且该属性值以某值结尾的元素
[attribute*=”某值”] 选中含有某属性且该属性值以含有某值的元素
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$("div[title]").css("color","red");
$("div[title=abc]").css("color","deeppink");
$("div[title!=abc]").css("color","orangered");
$("div[title^=abc]").css("color","cadetblue");
$("div[title$=abc]").css("color","lightseagreen");
$("div[title*=abc]").css("color","greenyellow");
});
script>
head>
<body>
<div>第一个divdiv>
<div title="abc">第二个divdiv>
<div title="abcd">第三个divdiv>
<div title="dabc">第四个divdiv>
<div title="dabce">第五个divdiv>
body>
html>
5、表单选择器
分为基本表单选择器和表单过滤器
1）基本表单选择器
:input $(":input") 所有 元素
:text $(":text") 所有 type="text" 的 元素
:password $(":password") 所有 type="password" 的 元素
:radio $(":radio") 所有 type="radio" 的 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 元素
:submit $(":submit") 所有 type="submit" 的 元素
:reset $(":reset") 所有 type="reset" 的 元素
:button $(":button") 所有 type="button" 的 元素
:image $(":image") 所有 type="image" 的 元素
:file $(":file") 所有 type="file" 的 元素
2）表单过滤器
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
:checked 主要针对单选按钮及复选框
:selected 主要针对下拉列表
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器title>
<script type="text/javascript" src="js/jquery-3.5.1.js" >script>
<script type="text/javascript">
$(function(){
$(":text").css("background-color","red");
$(":password").css("background-color","blue");
console.log($(":checked"));
console.log($(":selected"));
});
script>
head>
<body>
用户名：<input type="text" /><br/>
密码：<input type="password" /><br />
篮球
足球
<input type="checkbox" name="hobby" value="2" checked/>排球
<input type="checkbox" name="hobby" value="3" checked/>乒乓球<br />
<select>
<option>四川option>
<option selected>湖南option>
<option>长沙option>
select>
<select>
<option>1999option>
<option selected>1998option>
<option>1997option>
select>
body>
html>
案例：电子时钟
<html>
<head>
<meta charset="UTF-8">
<title>电子时钟title>
head>
<body>
<div id="time">div>
<script type="text/javascript">
function getTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML = time;
}
getTime();
setInterval(getTime,1000);
script>
body>
html>
