目录
1. 概念
一个JavaScript框架。简化JS开发
Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”
JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已
2. 快速入门
2. 导入JQuery的js文件:导入min.js文件
3. 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
//使用JQuery获取元素对象
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
</body>
</html>
3. JQuery对象和JS对象区别与转换
dom对象,使用javascript的语法创建的对象叫做dom对象, 也就是js对象。
var obj= document.getElementById("txt1");
obj是dom对象,也叫做js对象
jquery对象: 使用jquery语法表示对象叫做jquery对象, 注意:jquery表示的对象都是数组
var jobj = $("#txt1"); jobj就是使用jquery语法表示的对象,也就是jquery对象。 它是一个数组
JS对象可以和jquery对象相互的转换
dom对象可以转为jquery , 语法: $(dom对象)
jquery对象也可以转为dom对象:从数组中获取第一个对象,第一个对象就是dom对象, 使用[0]或者get{0)
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
function fun1(){
//JS对象
var text = document.getElementById("text");
alert(text.value);
//转为jQuerty对象
var j_text = $(text);
alert(j_text.val());
}
function fun2(){
var inputs = $("input");
//jQuery对象转为JS对象
var psw_input = inputs.get(1);
alert(psw_input.value);
}
</script>
</head>
<body>
<input type="text" id="text" placeholder="文本框"/><br/>
<input type="password"id="psw" placeholder="密码框"/><br/>
<input type="button" value="单击1" onclick="fun1()"/><br/>
<input type="button" value="单击2" onclick="fun2()"/>
</body>
</html>
为什么要进行dom和jquery的转换 :
目的是要使用对象的方法,或者方法,当你的dom对象时,可以使用dom对象的属性或者方法, 如果你要想使用jquery提供的函数,必须是jquery对象才可以。
4. 选择器
基本选择器
选择器: 就是定位条件;通知 jquery 函数定位满足条件的 DOM 对象
根据 ID,class 属性,标签类型名定位 HTML 元素,转为 jQuery 对象
1. id 选择器
语法:$(“#id名称”)
2.class 选择器
语法:$(“.class名称”)
3. 标签选择器
语法:$(“标签名”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
div {
width: 100px;
height: 100px;
background: pink;
color: royalblue;
}
</style>
</head>
<body>
<div id="one" class="first">第一个div</div><br/>
<div id="two" class="second">第二个div</div>
<input type="button" value="button1" onclick="fun1()"><br/>
<input type="button" value="button2" onclick="fun2()"><br/>
<input type="button" value="button3" onclick="fun3()"><br/>
</body>
<script>
function fun1(){
var div_one = $("#one");
div_one.css("background","red");
}
function fun2(){
var div_one = $(".two");
div_one.css("color","black");
}
function fun3(){
var div_one = $("div");
div_one.css("background","red");
}
</script>
</html>
4.所有选择器
语法:$(“*”) 选取页面中所有 DOM 对象
5.组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器,可以组合 id,class,标签名等。
语法:$(“id,class,标签名”)
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>,均可做出相应选择, 表单选择器是为了能更加容易地操作表单, 表单选择器是根据元素类型来定义的。
<input type="text"> <input type="password">
<input type="radio"> <input type="checkbox">
<input type="button"> <input type="file">
<input type="submit"> <input type="reset">
语法: $(":type 属性值")
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
姓名<input type="text" ><br/>
密码<input type="password"><br/>
性别<br/>
<input type="radio" name="sex" value="男">男<br/>
<input type="radio" name="sex" value="女">女<br/>
爱好<br/>
<input type="checkbox" value="看书">看书<br/>
<input type="checkbox" value="下棋">下棋<br/>
<input type="file" value="上传文件"><br/>
<input type="button" value="text获取" onclick="fun1()"><br/>
<input type="button" value="password获取" onclick="fun2()"><br/>
<input type="button" value="radio获取" onclick="fun3()"><br/>
<input type="button" value="checkbox获取" onclick="fun4()"><br/>
<input type="button" value="file获取" onclick="fun5()"><br/>
</body>
<script>
function fun1(){
var text = $(":text");
alert(text.val());
}
function fun5(){
var file = $(":file");
alert(file.val());
}
function fun2(){
var psw = $(":password");
alert(psw.val());
}
function fun3(){
var radios = $(":radio");
for(var i=0;i<radios.length;i++){
alert(radios[i].value);
}
}
function fun4(){
var checkboxs = $(":checkbox");
for(var i=0;i<checkboxs.length;i++){
alert(checkboxs[i].value);
}
}
</script>
</html>