目录
jquery引入
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
引入失败：
会报这个错
dom对象和jquery对象
通过js获得到的对象就是dom对象·(document)
通过jquery获得的对象就是jquery包装集对象，简称jquery对象
jquery获取的是一个集合，dom对象是该标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="hello">文本对象</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
//dom 获取对象 返回该标签
var hello_dom=document.getElementById("hello");
//dom 获取一大串对象 因为这个标签中有很多其他标签，所以返回一个数组
var page=document.getElementsByTagName("html");
// 当获取不存在的对象时，dom返回的是null
var hello_dom2=document.getElementById("html");
console.log(hello_dom);
console.log(page);
console.log(hello_dom2);
console.log("----------------------------------------");
// jquuery获取对象，是一个集合
var hello_jquery=$("#hello");
// jquery当获取不存在的对象，jquery返回的是一个空的集合
var page=$("#html");
console.log(hello_jquery);
console.log(page);
console.log("-------------------将dom转换为jqery对象------------------");
var domtojquery=$(hello_dom);
console.log(domtojquery);
console.log("--------------------将jquery对象转为dom对象--------------------");
var jquerytodom=hello_jquery[0];
console.log(jquerytodom);
</script>
基础元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1" class="div1"> div1</div>
<div id="div2" class="div2"> div2</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
//id选择器
var div1=$("#div1");
console.log(div1);
// class选择器
var div2=$(".div1");
console.log(div2);
// 元素选择器
var div3=$("div");
console.log(div3);
// 选择全部元素
var div_all=$("*");
console.log(div_all);
</script>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father" id="father0">father0</div>
<div class="father" id="father">
father
<div class="son" id="son">son
<span></span>
<div class="sonson">sonson <span></span></div>
</div>
</div>
<div class="father" id="father2">father2</div>
<div class="father" id="father3">father3</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// 后代选择器 选择父元素的所有是div的子元素（不管儿子，孙子，重孙子）
var hd=$("#father div"); //有一个儿子，一个孙子，会找到两个
console.log(hd);
// 子代选择器 选择父元素所有是div的儿子元素（只有儿子）
var zd=$("#father>div"); //有一个儿子找到一个
console.log(zd);
// 相邻选择器 选择元素的是div的下一个同级元素
var xl=$("#father+div"); //可以找到
console.log(xl);
// 同辈选择器 选择元素的是div的同级元素
var xl=$("#father ~ div"); //可以找到两个div，注意，代码从上向下执行，father0是找不到的
console.log(xl);
</script>表单选择器
<form action="" οnsubmit="return check()" class="container">
<span>用户名：</span>
<input type="text" class="com" />
<span>昵称：</span>
<input type="text" class="com" />
<input type="submit" value="提交">
<input type="reset" value="重置">
<button></button>
</form>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
//:input 获取所有的表单元素(行内元素不算)，总共有5个，用户名 昵称，提交按钮 ，重置按钮，button按钮
var inputs=$(":input");
console.log(inputs);
// input 只打印和input有关的，就是4个
var inputs2=$("input");
console.log(inputs2);
</script>
操作元素的属性
总结：prop一般用于设置boolean属性，其他的属性都由attr()来设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="zyk" checked="checked" id="a" abc="abc">aa
<input type="checkbox" name="zyk" id="b">bb
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// 固有属性 元素本身就有的属性 id name class style
// 返回值是boolen的属性 checked selected disabled
// 自定义属性：用户自己定义的属性
// attr()和prop()的区别
// 1.如果是固有属性，没有区别
// 2.如果是自定义属性，attr()可以操作，Prop()不可操作
// 3.如果返回值是boolean类型的属性
// 如果设置了属性，attr()返回具体的值，prop()返回true
// 如果没有设置该属性，attr()返回undefined,prop（）返回false
// 总结：prop一般用于设置boolean属性，其他的属性都由attr()来设置
// 1.获取属性
// attr("属性名") prop("属性名");
var name =$('#a').attr("name");
console.log(name);
var name2 =$('#a').prop("name");
console.log(name2);
// 2.attr设置属性
$('#a').attr("name","zyk2222");
var name_afterchange =$('#a').attr("name");
console.log("attr设置name属性"+name_afterchange);
// prop设置属性
$('#a').prop("name","zyk3333");
var name_afterchange =$('#a').prop("name");
console.log("attr设置name属性"+name_afterchange);
// 3.attr移除name属性
$("#a").removeAttr("name");
// prop不能用于移除属性
// $("#b").removeProp("name");
// attr()可以操作自定义属性
var abc =$('#a').attr("abc");
console.log("attr获取自定义属性"+abc);
$("#a").attr("abc","bcd");
var abc =$('#a').attr("abc");
console.log("attr设置自定义属性"+abc);
// prop()不可以用于操作自定义属性
var abc =$('#a').prop("abc");
console.log("prop不可以用于操作自定义属性"+abc);
// 3.如果返回值是boolean类型的属性
// 如果设置了属性，attr()返回具体的值，prop()返回true
// 如果没有设置该属性，attr()返回undefined,prop（）返回false
</script>操作元素的样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.css1{
background-color: red;
height: 200px;
width: 200px;
}
.css2{
background-color: green;
height: 200px;
width: 200px;
}
.fonts{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="div1" class="css1">div1</div>
<div id="div2" class="css2">div2</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
//获取元素的class名
var div1=$("#div1").attr("class");
console.log(div1);
// 修改元素的class名
$("#div1").attr("class","css2");
var div2=$("#div1").attr("class");
console.log(div2);
// 给元素添加样式类 如果有冲突，以后设置的为准
$("#div1").addClass("fonts");
var div1=$("#div1").attr("class");
console.log(div1);
// 给元素添加行内样式
$("#div1").css("background-color","red");
var div1=document.getElementById("div1");
console.log(div1);
// 给元素添多个行内样式
$("#div1").css({"background-color":"pink","line-height":"500px"});
var div1=document.getElementById("div1");
console.log(div1);
// 移除样式
$("#div1").removeClass("css2");
</script>
操作元素的内容
表单元素（在页面上可以操作的，值需要用户输入）
<input type="text" value="123" id ="text"> 获得输入框中的值，即value
文本框text 密码框password 单选框radio 复选框 checkbox 隐藏域 hidden 文本域textarea
非表单元素 （在两个括号中间写值的） div p span h1-h6
<div id="hello">123456</div> 获得它的值，就是获得123456
<!DOCTYPE html>
<html lang="en">
<!-- 操作元素的内容 -->
<!-- 表单元素（在页面上可以操作的）
文本框text 密码框password 单选框radio 复选框 checkbox 隐藏域 hidden 文本域textarea -->
<!-- 非表单元素 div p span h1-h6 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">div1div1div1</div>
<input type="text" id="text1" value="text">
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// 表单元素
//html 获得元素的值 包含html标签 （非表单元素）
var div1 = $("#div1").html();
console.log(div1);
//html（"内容"） 设置元素的值，包含html标签（）
$("#div1").html('div2222');
var div1 = $("#div1").html();
console.log(div1);
// 非表单元素
// val() 获取元素的值(表单元素)
var text1= $("#text1").val();
console.log(text1);
// val('值') 设置元素的值（表单元素）
$("#text1").val("text2");
var text1= $("#text1").val();
console.log(text1);
</script>
创建元素和添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#div2 {
width: 200px;
height: 200px;
border: 1px solid green;
}
#div3 {
width: 20px;
height: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"></div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// 在指定元素的内部的最前面添加子元素 可以是字符串/html标签/jquery对象
// 注意虽然是允许字符串和html标签，但是要用$()把他们转为jquery对象，如下
// prepend() 和prependTo只是方式不同，其他一致 指定元素.prepend(内容);
var p1 = "<p>p1p1p1</p>";
$("#div1").prepend($(p1));
//preparedto() 和prepend只是方式不同，其他一致 内容.prependTo(指定元素);
var p2 = "<p>p2p2p2</p>";
$(p2).prependTo($("#div1"));
// 在指定元素的内部的最后面添加子元素 可以是字符串/html标签/jquery对象
// 注意虽然是允许字符串和html标签，但是要用$()把他们转为jquery对象，如下
// append() 和appendTo只是方式不同，其他一致 指定元素.append(内容);
var p3 = "<p>p3p3p3</p>";
$("#div2").append($(p3));
//appendTo() 和append只是方式不同，其他一致 内容.appendTo(指定元素);
var p4 = "<p>p4p4p4</p>";
$(p4).appendTo($("#div2"));
// before在指定元素前追加同级元素
$("#div2").before("<h1>在div2 前添加同级元素<h1>");
// after在指定元素后追加统计元素
$("#div2").after("<h1>在div2 后添加同级元素<h1>");
// 如果要添加的元素已经存在，则相当于是剪切，把该元素从原来的位置拿走，放在要插入的位置（上面六个方法全都是这样）
$("#div2").append($("#div3"));
</script>ready加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="h1">h1</h1>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// 在dom执行完时加载事件 相当于的 js的 window.onload()
$(document).ready(function(){
console.log($("#h1"));
});
// 这是简写，两种方法都可以，谁在前边先执行谁
$(function(){
console.log($("#h1").html());
});
</script>绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="p1">点我输出一句话</p>
<button id="button1">点击一下之后禁用该按钮</button>
<hr>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>
<button id="button5">button5</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
// bind绑定事件
$("#p1").bind("click",function(){
console.log("世上无难事，只怕有心人");
});
// 直接绑定
$("#button1").click(
function(){
console.log("按钮已经被禁用");
// $("#button1").attr("disabled","true");
console.log("this是dom对象,要使用必须先转为jquery对象");
$(this).attr("disabled","true");
}
);
// 给一个元素的多个事件绑定同一个函数
$("#button2").bind("click mouseover",function(){
console.log("button2 被点击或者鼠标划过按钮2");
});
// 给一个元素的不同事件绑定不同的函数
$("#button3").bind("click",function(){
console.log("按钮3被点击了");
}).bind("mouseover",function(){
console.log("鼠标划过了按钮3");
});
// 给一个元素的不同事件绑定不同的函数 的第二种写法
$("#button4").bind({
"click":function(){
console.log("按钮4被点击");
},
"mouseover":function(){
console.log("鼠标划过了按钮4");
},
});
// 直接绑定
$("#button5").click(function(){
console.log("按钮5被点击了");
}).mouseover(function(){
console.log("按钮5移出了");
});
</script>
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
