搜索
Web前端开发-JQuery内容导航：Jquery简介和应用HTML5简介及发展史HTML的优点以及未来发展CSS背景及简介CSS3概念及详解WEB前端开发Web前端开发是从网页制作演变而来的，之前使用Photoshop和Dreamweaver就可以方便的制作网页。但如果要让网页的内容更加生动，提供更多交互形式的用户体验，以满足企业级别的需求。那么还需要掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、Ajax、JavaScript等。内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五4.jQuery中的DOM操作•DOM(DocumentObjectModel—文档对象模型)：一种与浏览器,平台,语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件•DOM操作的分类:•DOMCore:DOMCore并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它.它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档,例如:XML•HTMLDOM:使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性•CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM主要用于获取和设置style对象的各种属性4.1节点•查找节点:•查找元素节点:通过jQuery选择器完成.•查找属性节点:查找到所需要的元素之后,可以调用jQuery对象的attr()方法来获取它的各种属性值4.1节点•创建节点:使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象返回.•注意:•动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;•当创建单个元素时,需注意闭合标签和使用标准的XHTML格式.例如创建一个p元素,可以使用$(“p/”)或$(“p/p”),但不能使用$(“p”)或$(“创建文本节点就是在创建元素P”)•节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建4.1节点•插入节点:动态创建了HTML元素之后,还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点4.1节点•以上方法不但能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动.4.1节点•删除节点：•remove():从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素.当某个节点用remove()方法删除后,该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.•empty():清空节点–清空元素中的所有后代节点(不包含属性节点).4.1节点•替换节点:•replaceWith():将所有匹配的元素都替换为指定的HTML或DOM元素•replaceAll():与replaceWith()方法相反.•注意:若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失4.2属性操作•attr():获取html属性和设置属性•当为该方法传递一个参数时,即为某元素的获取指定属性•当为该方法传递两个参数时,即为某元素设置指定属性的值•jQuery中有很多方法都是一个函数实现获取和设置.如:attr(),html(),text(),val(),height(),width(),css()等.•removeAttr():删除指定元素的指定属性4.2属性操作•设置和获取HTML,文本和值•html()--读取和设置某个元素中的HTML内容,可用于XHTML,但不能用于XML文档•text()--读取和设置某个元素中的文本内容,既可以用于XHTML也可以用于XML文档.•val()--读取和设置表单中的值,类似JavaScript中的value属性.对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组4.3样式操作•Class的获取和设置:class是元素的一个属性,所以都可以使用attr()方法来完成.•addClass()--追加样式:•removeClass()--移除样式，从匹配的元素中删除全部或指定的class•toggleClass()--切换样式，控制样式上的重复切换.如果类名存在则删除它,如果类名不存在则添加它.•hasClass()--判断是否含有某个class,有则返回true;否则返回false4.3样式操作•CSS-DOM操作•获取和设置元素的样式属性:css()•获取和设置元素透明度:opacity属性•获取和设置元素高度,宽度:height(),width().在设置值时,若只传递数字,则默认单位是px.如需要使用其他单位则需传递一个字符串,例如$(“p:first”).height(“2em”);•获取元素在当前视窗中的相对位移:offset().其返回对象包含了两个属性:top,left.该方法只对可见元素有效4.4遍历节点•children()--取得匹配元素的所有直接子元素组成的集合。•next()--取得匹配元素后面紧邻的同辈元素的集合（只有一个元素）。•prev()--取得匹配元素前面紧邻的同辈元素的集合（只有一个元素）。•siblings()--取得匹配元素前后所有的同辈元素。4.4遍历节点•find()—取得匹配元素的符合条件的后代元素，直到最后一个后代•parent()--取得匹配元素的直接父元素。•parents()--取得匹配元素的所有祖先元素，直到文档的根元素html。•parentsUntil()--返回介于两个匹配元素之间的所有祖先元素。4.5事件•加载DOM•在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在常规的JavaScript代码中,通常使用window.onload方法,在jQuery中使用$(document).ready()方法.•事件绑定•对匹配的元素进行特定的事件绑定:bind()•直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。4.5事件•合成事件•hover():模拟光标悬停时间.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数.•toggle():用于模拟鼠标连续单击事件.第一次单击元素,触发指定的第一个函数,当再一次单击同一个元素时,则触发指定的第二个函数,如果有更多个函数,则依次触发,直到最后一个.•toggle()的另一个作用:切换元素的可见状态.4.5事件•移除事件•移除某按钮上的所有click事件:$(“btn”).unbind(“click”)•移除某按钮上的所有事件:$(“btn”).unbind();•one():该方法可以为元素绑定处理函数.当处理函数触发一次后,立即被删除.即在每个对象上,事件处理函数只会被执行一次.4.5事件•移除事件•移除某按钮上的所有click事件:$(“btn”).unbind(“click”)•移除某按钮上的所有事件:$(“btn”).unbind();•one():该方法可以为元素绑定处理函数.当处理函数触发一次后,立即被删除.即在每个对象上,事件处理函数只会被执行一次.4.5事件•移除事件•移除某按钮上的所有click事件:$(“btn”).unbind(“click”)•移除某按钮上的所有事件:$(“btn”).unbind();•one():该方法可以为元素绑定处理函数.当处理函数触发一次后,立即被删除.即在每个对象上,事件处理函数只会被执行一次.4.5事件•移除事件•移除某按钮上的所有click事件:$(“btn”).unbind(“click”)•移除某按钮上的所有事件:$(“btn”).unbind();•one():该方法可以为元素绑定处理函数.当处理函数触发一次后,立即被删除.即在每个对象上,事件处理函数只会被执行一次.内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五4使用jQuery创建动画效果•hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none.代码功能同css(“display”,“none”);•show():将元素的display样式改为先前的显示状态.•以上两个方法在不带任何参数的情况下,作用是立即隐藏或显示匹配的元素,不会有任何动画.可以通过制定速度参数使元素动起来.•以上两个方法会同时减少(增大)内容的高度,宽度和不透明度.•fadeIn(),fadeOut():只改变元素的透明度.fadeOut()会在指定的一段时间内降低元素的不透明度,直到元素完全消失.fadeIn()则相反.•slideDown(),slideUp():只会改变元素的高度.如果一个元素的display属性为none,当调用slideDown()方法时,这个元素将由上至下延伸显示.slideUp()方法正好相反,元素由下至上缩短隐藏.4使用jQuery创建动画效果4使用jQuery创建动画效果•toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的.•slideToggle():通过高度变化来切换匹配元素的可见性.•fadeTo():把不透明度以渐近的方式调整到指定的值(0–1之间).4使用jQuery创建动画效果•toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的.•slideToggle():通过高度变化来切换匹配元素的可见性.•fadeTo():把不透明度以渐近的方式调整到指定的值(0–1之间).