JavaScript学习笔记二

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。

JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样
JavaScript能够对页面中的所有事件做出反应

在操作HTML元素，首先找到该元素。

通过Id找到HTML元素 document.getElementById("idname")
通过标签找到HTML元素 var x=document.getElementById("main"); var y=x.getElementsByTagName("p");查找id="main"元素中所有元素
通过类名找到HTML元素 document.getElementsByClassName("className")

改变HTML元素的样式，使用这个语法：

document.getElementById(id).style.property=new_style

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

DOM事件传递有两种方式：冒泡与捕获。

两种方式中元素事件触发顺序中，冒泡会先触发内部元素，后触发外部元素；捕获会先触发外部元素，后触发内部元素。

方法调用格式：addEventListener(event,function,useCapture);

其中，useCapture默认为false,即冒泡传递，值为true时，事件使用捕获传递。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

JavaScript中创建三种消息框：警告框、确认框、提示框。

警告框用于确保用户可以得到某些信息。语法为window.alert("This is warning")，可以直接使用alert()方法。

确认框用户验证是否接受用户操作。点击"确认",返回true，点击"取消",返回false。语法为window.confirm("sometext")。

提示框用于提示用户在进入页面前输入某个值。用户需要输入某个值，然后点击确认或者取消按钮才能继续操纵。语法为window.prompt("sometext","defaultvalue")

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

在JavaScript中，可以设定的时间间隔之后来执行代码。计时事件可以用两种方法。

setInterval()-间隔指定的毫秒数不停地执行指定的代码(循环执行)
setTimeout()-暂停指定的毫秒数后执行指定的代码(延时执行)

使用clearInterval()方法停止setInterval()定时。

使用clearTimeout()方法停止setTimeout()定时。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

jQuery的应用

在HTML文档中使用jQuery函数格式：

$(document).ready(function(){
    //jQuery事件执行
})

简介的写法格式为：

$(function(){
    //jQuery事件执行
})

通过jQuery语法可以对HTML元素执行部分操作。语法为：$(selector).action()

实例：

$(this).hide()-隐藏当前元素
$("p").hide()-隐藏插入标签下的所有元素
$("p.test").hide()-隐藏所有class=''test"的元素
$("#test").hide()-隐藏所有id=''test"的元素

hide()与show()相对应，而toggle()则自动在显示和隐藏之间转换。

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("div.test")	选取 class 为 test 的 <div> 元素
$("div:first")	选取第一个 <div> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("p:even")	选取偶数位置的 <p> 元素
$("p:odd")	选取奇数位置的 <tr> 元素

以上均适用于HTML中的元素标签，<div>、、、<h>、<ul>。

$(document).ready()方法允许我们在文档完全加载后执行函数。jQuery中常用的事件方法有：

click()方法是点击事件被触发时调用函数；

dblclick()方法为双击事件被触发时调用函数；

mouseenter()方法为鼠标经过元素触发事件；

mouseleave()方法为鼠标离开元素触发事件；

mousedown()方法为鼠标移动到元素上并按下鼠标触发事件；

mouseup()方法为鼠标在元素上并松开鼠标触发事件；

hover()方法为鼠标移动元素上时触发第一个函数，移出元素是，触发第二个函数；

focus()方法为鼠标点击选中元素或通过tab键定位到元素时，获得焦点触发事件；

blur()方法则与focus()相反；

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

通过jQuery实现HTML元素的淡入淡出效果，共有四种fade方法。

fadeIn()用于淡入已经隐藏的元素，语法为：$(selector).fadeIn(speed,callback)。
fadeOut()用于淡出可见元素，语法与fadeIn相同。
fadeToggle()用于淡入淡出之间切换，语法同上。
fadeTo()允许渐变为给定的不透明度(介于0与1之间)，语法为：$(selector).fadeTo(speed,opacity,callback)。

三种方法实现元素上下滑动。

slideDown()用于向下滑动元素，语法为：$(selector).slideDown(speed,callback)。
slideUp()用于向上滑动元素。
slideToggle()用于向上向下滑动元素之间切换。

动画效果可以通过animate()方法实现。

语法：$(selector).animate({params},speed,callback);

其中params参数重新定义了selector的css属性(可以是同事操作多个属性，如opacity、height、width等)，形成动画效果。

stop用于停止动画或效果，包括滑动、淡入淡出和自定义动画。

通过jQuery可以把以上的方法链接在一起，即允许一条语句运行多个jQuery方法(在相同的元素上)。

例：

$("#p").css("color","blue").slideDown(1000).slideUp(1000);

效果为：标签内容变为蓝色，然后向下滑动，后向上滑动。

jQuery方法中可以通过三个方法实现获取内容。

text()-设置或返回所选元素的文本内容
html()-设置或返回萱萱的内容(包括HTML标记)
val()-设置或返回表单字段的值。(即获取输入字段的值)
attr()-获取链接中href属性的值

添加新的HTML内容有四个jQuery方法：

append()-在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after()-在被选元素之后插入内容
before()-在被选元素之前插入内容

删除内容则也有两种方法：

remove()-删除被选元素及其子元素(全删)
empty()-删除被选元素的子元素(只删子元素，父元素还在)

jQuery拥有多种对CSS操作的方法。

addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作

这些方法可以为HTML标签添加类标签，从而通过预先设置css样式，对这些元素进行改变。也可以通过css()方法对标签设置一个或多个css属性。

jQuery遍历用于遍历DOM树，其中向上遍历方法有：

parent()-被选元素上一级的直接父元素，通过添加参数过滤
parents()-被选元素上级所有祖先元素，也可以通过添加参数过滤
parentsUntil()-介于被选元素及给定祖先之间的元素，不包括给定祖先。

如HTML格式为：

<div>
    <ul>
        <li>
        <p></p>
        </li>
    </ul>
</div>

那么$("p").parentsUntil("div")则选中了<ul>、<li>两个标签。

用于向下遍历DOM树的jQuery方法有：

children()-被选元素的所有直接子元素(所有儿子，不包括孙子)，也可以通过添加参数进行过滤
find()-被选元素所有后代满足参数的，其中find("*")返回所有后代

用于水平遍历DOM树的方法较多：

sibings()-除了自己所有同胞元素，也可以通过参数进行过滤
next()-被选元素的下一个同胞元素，prev()相对应
nextAll()-被选元素后面所有同胞元素，preAll()相对应
nextUntil()-介于之间，参考parentsUntil()，prevUntil()相对应

过滤遍历的方法有first(0、last()、eq()、filter()、not()。

JavaScript学习笔记二

猜你喜欢