1、window.onload
<script type="text/javascript">
window.onload=function(){
console.log("悟空");
}
window.onload=function(){
console.log("唐僧");
}
</script>jQuery的页面加载
<script type="text/javascript">
console.log("------------jQuery的页面加载------------------")
$(document).ready(function(){
console.log("林冲");
});
$(document).ready(function(){
console.log("鲁智深");
});
</script>
<script type="text/javascript">
$(function(){
console.log("宋江")
});
</script>2、JS对象和jQuery对象
若要用jQuery对象，就要加上
<script type="text/javascript" src="../resource/jquery.js"></script>
这段话。不然引不过来。
<body>
<input type="text" id="account" value="wukong">
<script type="text/javascript" src="../resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log("--------JS对象-----------------")
var jsObject = document.getElementById("account");
alert(jsObject);
//下面获得js对象
console.log(jsObject);//<input type="text" id="account" value="wukong">
console.log("--------jQuery对象-----------------")
var jqueryObject = $("#account");//ID选择器
alert(jqueryObject);//object Object
console.log(jqueryObject);//jQuery.fn.init(1)
});
</script>
</body>3、JS对象和jQuery对象互转
<body>
<input type="text" id="account" value="wukong">
<script type="text/javascript" src="../resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
var jsObject = document.getElementById("account");
console.log(jsObject);
console.log(jsObject.value);
console.log("JS对象转换为Jquery对象");
var jqueryObject = $(jsObject);//$(JS对象)
console.log(jqueryObject);
console.log(jqueryObject.val());
console.log("Jquery对象转换为JS对象==>Jquery对象获取的时候一直都是一个[object Object]数组");
var jsObj01 = jqueryObject[0];
console.log(jsObj01);
console.log(jsObj01.value);
var jsObj02 = jqueryObject.get(0);
console.log(jsObj02);
console.log(jsObj02.value);
});
</script>
</body>jsObject：得到的是js对象，也就是<input type="text" id="account" value="wukong">这个标签元素。
jsObject.value：得到的就是input标签的value值，也就是wukong。
将JS对象转换为Jquery对象：$(JS对象)
jqueryObject：得到的就是jQuery对象，也就是jQuery.fn.init(1)
即，
jqueryObject.val()：得到的就是input标签的value值，也就是wukong。
Jquery对象转换为JS对象：
Jquery对象获取的时候一直都是一个[object Object]数组，
做法就是通过数组的方式来做。
var jsObj01 = jqueryObject[0];
console.log(jsObj01);
console.log(jsObj01.value);
var jsObj02 = jqueryObject.get(0);
console.log(jsObj02);
console.log(jsObj02.value);
以下两种方式。
4、基础选择器：ID选择器、类选择器、元素选择器、通配选择器、群组选择器
①ID选择器【 # 的就是类选择器】
<body>
<input type="text" id="account">
<span id="name"></span>
<script type="text/javascript" src="../resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
//document.getElementById("account").value="悟空";
//document.getElementById("name").innerHTML="八戒";
$("#account").val("悟空");
$("#name").html("天蓬元帅");
});
</script>
</body>document.getElementById("account").value="悟空";
document.getElementById("name").innerHTML="八戒";
以上两句话，是javascript的。
以后我们用jquery的。
$("#account").val("悟空");
解释：
第一步：#account就是一个ID选择器，
第二步：就是设置标签的value为悟空。
$("#name").html("天蓬元帅");
解释：
第一步：#name就是一个ID选择器，
第二步就是设置它的显示值为天蓬元帅。
②类选择器【 . 的就是类选择器】
<body>
<ul>
<li class="jd">悟空</li>
<li class="shxt">悟空</li>
<li class="jd">悟空</li>
<li class="shxt">悟空</li>
</ul>
<script type="text/javascript" src="../resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log("=======通过类名获取元素个数============");
var liList = document.getElementsByClassName("shxt");//兼容性不好
for(var i=0;i<liList.length;i++){
liList[i].style.color="red";
liList[i].style.fontSize="30px";
}
//类选择器==链式操作
$(".jd").css("color","blue").css("font-size","30px");
});
</script>
</body>为li标签写class属性。
兼容性不好的不再介绍，想看自己来瞅瞅。
讲jquery的类选择器，可以用链式操作。
$(".jd").css("color","blue").css("font-size","30px");
解释：
.jd是类选择器。
设置css样式。
③元素选择器【 啥也没有，直接上元素类型 的就是类选择器】
<body>
<input type="text" value="西游记">
<input type="text" value="水浒传">
<input type="text" value="三国演义">
<input type="text" value="红楼梦">
<script type="text/javascript" src="../resource/jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log("=======JS方式============");
var inputList = document.getElementsByTagName("input");
for(var i=0;i<inputList.length;i++){
console.log(inputList[i].value);
}
console.log("=======Jquery方式============");
//元素选择器
$("input").each(function(index,obj){
console.log($(this).val());
console.log(this);
console.log(index);
console.log(obj);
});
});
</script>
</body> $("input").each(function(index,obj){
console.log($(this).val());
console.log(this);
console.log(index);
console.log(obj);
});
解释：
jQuery的遍历方式呢，就是each()方法。
4613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
