网页中总是不出特效
最近真是被这个问题整的头大， 最后终于是找到了，记录一下问题
最近发现写个jQuery放在其它里面就是没有反应,必须放在$(function(){}):里面才会起作用,或者其他地方的jQuery必须被$(function(){}):调用
HTML中的代码是同步执行的：按照从上到下的顺序解释执行的
为了保证页面中的标签加载完成之后执行JQuery代码
使用$(function() { ...代码：就是页面标签加载完成执行的代码.. })
$(function(){
//TODO:这里的内容表示js只有在DOM元素全部加载结束后才会执行
});
如上面注释中说明的，js在浏览器渲染页面时是按照在文档中出现的顺序来顺序执行的。因此如果js文件在<header>部分引入，那么文件中的js代码会在dom元素渲染完毕前就执行。假设js代码中有类似$('#elementId').click(function(){...});这样的语句，那么就会因为dom没有渲染完，导致根本找不到elementId这个对象，从而导致事件绑定失败。
但是，如果我们把js的内容放到$(function(){...});里面，这里面的代码会等到文档内容全部渲染完毕才执行。事件就能够成功绑定了。
所以我们一般在写代码时，通常会注意两点
1、借用$(function(){});包括js内容
2、将需要引入的js文件放在dom的底部引入
<html>
<head>
....
</head>
<body>
<div>...</div>
<div>...</div>
<script src="/script/test.js">
</body>
</html>
$(function(){})它是代表页面加载完的时间...就相当于你在body定义onload事件....写在其他地方是可以的....只是我们习惯在加载后注册jQuery事件....你写的外面就要考虑它的加载顺序了..如果写在里面是不需要的...因为它会等到页面加载完毕才去运行的....
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 自动播放间隔事件
autoplay:3000,
})
}
</script>
下面记录一下jQuery中强大的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
HTML中的代码是同步执行的：按照从上到下的顺序解释执行的
为了保证页面中的标签加载完成之后执行JQuery代码
使用$(function() { ...代码：就是页面标签加载完成执行的代码.. })
*/
$(function() {
// 这里写的代码，就是当页面中的标签全部加载完成执行的代码；类似于window.onload
// 标签选择器:$("标签名称")
$("#btn_tag_selector").click(function() {
// 标签选择器：选择所有的div标签，添加边框
$("div").css({
"border":"solid 1px orange"
})
});
$("#btn_id_selector").click(function() {
// ID选择器：语法$("#id值")
$("#box").css({
"border":"solid 1px red"
})
});
$("#btn_class_selector").click(function() {
// class选择器：语法：$(".class名称")
$(".item").css({
"border":"solid 1px blue",
"background":"#ccc"
})
});
$("#btn_child_selector").click(function() {
// 层级选择器，可以类似css语法一样，使用样式嵌套
// 子元素选择器
$("#container > li").css({
"border":"solid 2px pink",
"background":"#dfdfdf"
})
});
$("#btn_contain_selector").click(function() {
// 层级选择器：包含选择器
$("#container li").css({
"border":"solid 2px pink",
"background":"#006699",
"color":"#fff"
})
});
$("#test").click(function() {
$("#container a").css({
"color":"red",
"text-decoration":"none"
})
});
$("#btn_odd_selector").click(function() {
$("li:odd").css({
"background":"orange"
})
})
})
</script>
</head>
<body>
<button id="btn_tag_selector">标签选择器</button>
<button id="btn_id_selector">id选择器</button>
<button id="btn_class_selector">class选择器</button>
<button id="btn_child_selector">层级选择器：子元素选择器</button>
<button id="btn_contain_selector">层级选择器：包含选择器</button>
<button id="test">测试获取标签中包含的一个深层标签超链接</button>
<button id="btn_odd_selector">:odd</button>
<hr>
<div>这是一个单纯的div标签，没有id和class属性</div>
<div id="box">这是一个div标签，id属性值为box</div>
<div class="item">这是一个div标签1，class属性值为item</div>
<div class="item">这是一个div标签2，class属性值为item</div>
<ul id="container">
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<li>这是一个ul中的li标签</li>
<ul>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签</li>
<li>这是ul中的ul里面的li标签<span>这是span标签</span></li>
<li>这是ul中的ul里面的li标签<a href="#">超链接</a></li>
</ul>
</ul>
</body>
</html>
网友评论