案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
姓名:<input id="myName" value="just text frame" />
<input type="button" onclick="func1()" value="clike me"/>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
function func1(){
// var test = document.getElementById("myName").value;
// alert(test);
alert($("#myName").val());
}
</script>
</html>
DOM对象与Jquery对象
DOM对象
使用javascript语法创建的对象就是DOM对象，它具有DOM对象的属性和方法 示列: var txt = document.getElementById("txt1"); ===>DOM对象 txt.value ====>DOM对象的属性
Jquery对象
使用Jquery的语法创建的对象就是Jquery对象，它具有Jquery对象的属性和方法 示列: var txt = ("#txt1"); ===>Jquery 对象 txt.val() ;=====>Jquery的方法 alert((".txt")[1].value) ====>Jquery 转DOM
DOM对象转Jquery
$(dom) ;不用加双引号 包一包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<input type="button" id="btn" value="==我要成为jQuery对象==" onclick="btnClick()" />
</body>
<script>
function btnClick(){
//得到Dom对象
var dom = document.getElementById("btn");
//转化为Jquery对象
var jObj = $(dom);
//弹出内容
alert(jObj.val());
}
</script>
</html>
Jquery转DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<input id="txt" value="请输入整数"><br>
<input type="button" value="计算平方" onclick="btnClick()">
</body>
<script>
function btnClick(){
//得到Jquert对宪法的文本框对象
var jObj = $("#txt");
//转化为Dom对象
var dom = jObj[0];
//进行平方运算
var mul = dom.value * dom.value;
//给文本框赋值
dom.value = mul;
}
</script>
</html>
选择器
- id选择器：是以元素的id属性为定位的依据，无论有多少个相同元素的id，只能定位到第一个元素 $("#id的名称")
- 类选择器，以class属性定元素 返回多个值 $(".类的名称")
- 标签选择器 $("标签名称")
- 所有选择器 $("*")
- 组合选择器：使用所有的选择器进行组合定位元素。此时ID选择器定位的元素是返回所有相同Id的元素 $("#one,.two")
过滤器
事件处理
页面加载函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script>
//页面加载函数,以保证加载函数内的代码 都会在页面加载完毕后执行
$(function(){
$("#btn1").on("click",function(){
alert($("#btn1").val());
})
})
</script>
<div>我是div-0</div>
<div>我是div-1</div>
<div>
我是第三个div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<p>功能按钮</p>
<input type="button" id="btn1" value="选择第一个div" ><br />
<input type="button" id="btn2" value="选择最后一个div"><br />
<input type="button" id="btn3" value="选择索引等于3的div"><br />
<input type="button" id="btn4" value="选择索引小于3的div"><br />
<input type="button" id="btn5" value="选择索引大于3的div"><br />
</body>
</html>
表单过滤选择器
函数
each !!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<br>
<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/><br><br>
<input type="button" id="btn1" value="遍历dom对象数组"><br />
<input type="button" id="btn2" value="遍历普通数组"><br />
<input type="button" id="btn3" value="遍历json对象"><br />
</body>
<script>
$(function(){
//重要 遍历dom对象数组
$("#btn1").on("click",function(){
var texts = $(":text");
$.each(texts,function(i,item){
alert("item ="+item.value+" i="+i);
})
})
/*
$(":text").each(function((i,item)){
alert("item ="+item.value+" i="+i);
})*/
//遍历普通数组
$("#btn2").on("click",function(){
var arrays = [11,22,33];
$.each(arrays,function(i,item){
alert(item);
})
})
//遍历json对象
$("#btn3").on("click",function(){
console.log("test");
var obj1 = {"name":"taylor","age":19};
$.each(obj1,function(key,value){
alert("key:"+key+" value:"+value);
})
})
})
</script>
</html>
遍历json数组
$("#btn3").on("click",function(){
var array = [{"name":"taylor","age":18},{"name":"xinhong","age":17}];
$.each(array,function(i,item){
console.log("name="+item.name+" age="+item.age);
})
})
事件传参
全选、全不选功能实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<input type="checkbox" id="all" style="margin-left: 20px"> 全选<br><br>
<input type="checkbox" name="ck">A<br>
<input type="checkbox" name="ck">B<br>
<input type="checkbox" name="ck">C<br>
<input type="checkbox" name="ck">D<br>
</body>
<script>
$(function(){
$("#all").on("click",function(){
var flag = this.checked;
$("input[name='ck']").attr("checked",this.checked);
//$("input[name='ck']").prop("checked",this,checked);
//prop 专门针对于表单这一类型的值进行赋值 || attr可以对任何属性进行赋值
$("input[name = 'ck']").on("click",function(){
if($("input[name = 'ck']").length == $("input[name = 'ck']:checked").length){
$("#all").prop("checked",true);
}else{
$("#all").prop("checked",false);
}
})
})
})
</script>
</html>
