脚本的执行流程
浏览器输入一个URL地址,服务器找到所请求的文件(可以是多个)发送给浏览器。
浏览器加载文件显示给用户。
在加载文件的时候会解析html结构如果发现标记,就调用javaScript解释器执行标记块里面的脚本。
javaScript并不改变原来的html和css文件,他只是改变浏览器内存中页面的DOM表示
下面的脚本是当web夜幕文件准备就绪的时候执行相关的操作。
<script> $(document).ready(...); </script>
|
$符号是jQuery的简写方式。jQuery()简写为$(),这就是jQuery函数,主要任务是获取括号中指定的元素。元素可以是css选择器,javascript对象,html。
选择元素的方式
和CSS的选择器操作一样,CSS选择元素增加样式,javascript选择元素增加行为
注意:javascript的选择器采用字符串的形式。
元素选择器,隐藏所有h1元素 $("h1").hide(); 类选择器使用.开始,所有my_class成员都向上滑动 $(".my_class").slideUp(); id选择器使用#开始,所有my_id的元素淡出。 $("#my_id").fadeOut();
举例: $("#myTop").css({"background-color":"blue"}); 把id为myTop的元素的css规则里面的背景色设置为蓝色。
$("span.Italian").toggle(); 处理span里面的类为Italian的元素 <span class="Italian">test text</span>
$("p#mytext").show(); 处理段落里面id为mytext的元素 <p id="mytext">test text</p>
类型+id选择 $("button#btn1").click(...); $("button#btn2").click(...);
表示当前正在处理的元素,依赖于上下文。 $(this)
后代选择器, 左边是父元素,右边是子元素,中间有个空格 选择div元素中所有的p元素 $("div p") 类和ID选择器与后代选择器结合使用 选择div元素中id为my_id的p元素 $("div p#my_id")
|
页面事件
- 为元素绑定一个事件。
方法一,在页面加载时为元素增加事件 $("#myElement").click(function(){...});
方法二,可以在页面加载后为元素增加事件 $("#myElement").bind('click',function(){...});
这里方法一和二最明显的区别在于方法一只有在DOM已经存在时才可以使用。 对于代码中新创建的元素就只能使用方法二来增加事件。
|
整个浏览器都是事件型的。
浏览器事件:error,resize,scroll
键盘事件:keydown, keypress, keyup
表单事件: blur,change,focus,select,submit
文档加载: load,ready,unload
鼠标事件: click, hover, focusin, focusout,mouseout,mouseover..
- 删除一个事件
从myElement删除click事件 $("#myElement").unbind('click') 从myElement删除所有事件 $("#myElement").unbind()
|
迭代器each,遍历元素,为每个元素执行操作
$(".nav_item").each(function(){ $(this).hide(); });
|
- 代码触发事件
结合选择器使用.trigger方法
$("button:first").trigger('click'); $("form").trigger('submit');
|
- 函数
function name(){ code here }
|
函数表达式
var myFunc2 = function(){ $("div").show(); }
function myFunc1(){ $("div").hide(); }
调用函数,这里需要括号 myFunc1(); 作为处理函数调用时,函数不需要括号 $("#myElement").click(myFunc2);
|
匿名函数
也叫自执行函数,一旦在代码中遇到匿名函数就会立即执行。函数中的变量只有在运行时才可用。
条件判断语句,web事件
- 修改DOM
移除元素
remove 从DOM中删除 detach 从DOM中取出,但是还会维护,可以重新关联
向上选择使用parent方法,左右选择使用prev和next方法,向下选择使用children方法 可以使用方法链进一步查找。 $(".fish").parent().parent();
删除元素中的内容 $("p").empty();
使用parents方法遍历所有的父元素 使用siblings方法遍历兄弟元素 选择距离所选元素最近的父元素使用closest方法 $("li").closest("ul")
可以使用变量存储元素。用于删除和恢复,需要在变量钱添加$符号,类型是数组 $f = $(".fish").parent().parent().detach();
替换DOM元素,一对一替换可以使用 $("h2").replaceWith("<h1>My Menu</h1>");
|
多对一的替换分两步
- 把新类插入旧类后面,这里有before和after两个位置一前一后
- 删除旧类
使用过滤器缩小选择范围
first 第一个元素, last最后一个元素,eq根据索引选择
元素索引为1的元素 #(".menuList").children().qu(1);
slice切片选择元素 filter过滤选择 not过滤掉不匹配的元素
|
获取,修改元素文本
var realPay = $("#realPayment").text(); $('#moreTime').text("5年");
|