jQuery(一)
程序员文章站
2024-03-18 21:54:40
...
DOM对象与jQuery对象的互转问题
DOM对象转jQuery对象
//此时btn为DOM对象,不能调用jQuery方法
var btn=document.getElementById("btn");
//DOM对象转jQuery对象
$("btn").click=function () {
console.log("小仙女");
};
jQuery对象转DOM对象
var $li = $("li");
//jQuery对象转DOM对象
//第一种方法(推荐使用)
$li[0];
//第二种方法
$li.get(0)
jQuery网页开关灯
第一种:通过现在网页状态实现
<script src="jquery-1.12.4.js"></script>
<script>
$("#btn").click(function () {
//判断有没有css样式
if ($("body").hasClass("cls")){
//如果有,就移除样式
$("body").removeClass("cls");
}else {
//如果没有,就添加样式
$("body").addClass("cls");
}
});
</script>
第二种:获取按钮value值实现
<script src="jquery-1.12.4.js"></script>
<script>
//获取按钮id
$("#btn").click(function () {
if ($(this).val()=="关灯"){//获取按钮value值
//下面这两行代码都可以实现改变网页状态
$('body').css("backgroundColor","black");
// $("body").addClass("cls");
$(this).val("开灯");
}else {
//下面这两行代码都可以实现改变网页状态
$('body').css("backgroundColor","");
// $("body").removeClass("cls");
$(this).val("关灯");
}
});
</script>
jQuery网页加载事件
在DOM中,网页加载事件只能进行一次(因为DOM中的网页加载事件是采用“=”的方式),后面的网页加载事件会覆盖掉前面的网页加载事件。
而在jQuery中,网页加载事件可以进行很多次,不会被覆盖掉
在DOM中的网页加载事件代码
<script>
window.onload=function (ev) {
console.log("东方不败");
};
window.onload=function (ev) {
console.log("梦婉是可甜可盐的仙女");
};
//输出结果为“梦婉是可甜可盐的仙女”
</script>
在jQuery中的网页加载事件:
第一种写法:$(window).load();(页面中所有元素加载完毕后触发)
<script src="jquery-1.12.4.js"></script>
<script>
$(window).load(function (ev) {
console.log("东方不败");
});
$(window).load(function (ev) {
console.log("梦婉是可甜可盐的仙女");
});
</script>
第二种写法:$(document).ready();(页面中基本元素加载后触发,比第一种加载方式块)
<script src="jquery-1.12.4.js"></script>
<script>
$(document).ready(function (ev) {
console.log("东方不败");
});
$(document).ready(function (ev) {
console.log("梦婉是可甜可盐的仙女");
});
</script>
第三种写法:(真正的jQuery写法)
<script src="jquery-1.12.4.js"></script>
<script>
jQuery(function () {
console.log("东方不败");
});
jQuery(function () {
console.log("梦婉是可甜可盐的仙女");
});
</script>
第四种写法:(终极版)
<script src="jquery-1.12.4.js"></script>
//第四种(终极版)
<script>
$(function () {
console.log("东方不败");
});
$(function () {
console.log("梦婉是可甜可盐的仙女");
});
</script>
下一篇: 校内模拟 noip2015真题