《Web前端技术(》课件_13.前端框架技术.pptx

前端框架技术

学习导图

13.1jQuery

13.1.1jQuery概述jQuery是一个快速、简洁的轻量级JavaScript框架，它的设计宗旨是“Writeless,Domore”，即倡导写更少的代码，做更多的事情。jQuery封装了JavaScript中常用的功能代码，利用强大的选择器，优化事件处理、DOM操作、特效与动画等，极大的简化了JavaScript编程。

13.1.2jQuery基本语法在jQuery中，一般使用选择器(selector)选取指定的HTML元素，并对选取的元素执行操作(action)，基本语法形式为：$(selector).action()。美元符号$相当于jQuery的简写，选择器selector表示查询的HTML元素。

13.1.1jQuery概述下载jQuery库之后，就可以在HTML文档中使用script元素进行引用。通过CDN（内容分发网络）引用jQuery，该方法无需下载jQuery文件到本地，StaticfileCDN、百度、新浪、谷歌和微软等服务器都存有jQuery。如果网站用户大部分是国内的，建议使用百度、新浪等国内CDN地址，如果网站用户是国外的，可以使用谷歌和微软CDN。

13.1.2jQuery基本语法隐藏页面中所有段落元素

13.1.3jQuery选择器jQuery提供了一系列选择器，以帮助前端开发者快速查找和定位页面中的节点，它支持CSS1~CSS3选择器的写法，主要包括基本选择器、层级选择器、伪类选择器、属性选择器等几大类别。基本选择器包括id选择器、类选择器、元素选择器、通配符选择器以及组合选择器等。使用$(#id)进行选择，例如divid=#div1div1/div，可以使用$(#div1)选取。

13.1.3jQuery选择器例如spanclass=.myclassspan1/span，可以使用$(.myclass)选取该span元素。元素选择器是直接根据给定html标记名称选择所有的元素。例如$(p)表示选取页面中所有的p元素。 同时选择多个不同元素，可以使用组合选择器。例如$(div,span,p.myclass)，可以同时选取div、span以及class=myclass的p元素。

13.1.3jQuery选择器层级选择器用来处理文档中节点之间的各类关系，包括父子关系、兄弟关系、祖孙关系等，对应到选择器上，则包含子元素选择器、后代元素选择器、兄弟元素选择器、相邻兄弟元素选择器。

13.1.3jQuery选择器伪类选择器放入用法与CSS中的伪元素相似，选择器以冒号“：”开头，后面跟上相应的选择条件，伪类选择器也称为过滤选择器，指的是通过一系列过滤条件匹配所要选取的元素。

13.1.3jQuery选择器属性选择器可以匹配包含给定属性的元素。例如查找所有含有id属性的div元素，可以写成$(div[id])的形式。进一步的，也可以匹配属性值是某个特定值的元素。选择name属性值为newsletter的所有元素，可以使用$(input[name=newsletter])

13.1.4jQuery中的DOM操作获取和设置元素内容。text()方法用来获取或设置所选元素的文本内容；html()方法同样用来获取或设置所选元素的文本内容，但是会包括HTML标记；val()方法用来设置或返回表单字段的值。

13.1.4jQuery中的DOM操作获取、设置属性：attr()方法移除属性:removeAttr()方法创建节点:$(html)添加节点:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()删除节点：remove()和empty()修改节点：clone(true)、replacewith和replaceAll、wrap()、wrapAll()、wrapInner()样式操作：css()、addClass()、removeClass()、hasClass()

13.1.5jQuery对象和DOM对象jQuery对象是通过jQuery中的$符号包装DOM对象后产生的对象，它可以使用jQuery中的方法。jQuery对象不能直接使用DOM对象中的方法。DOM对象也不能直接使用jQuery对象中的方法。

13.1.6jQuery效果隐藏和显示：hide()和show()方法。淡入淡出效果：fadeIn()、fadeOut()、fadeTo()方法。滑动效果：slideDown()和slideUp()方法。

13.2Bootstrap

13.2BootstrapBootstrap来自Twitt