详细说明:
类库: Prototype:是最早出现的类库,对String对象,Array对象进行了扩展. Dojo:dojo的强大之处,它提供了Js没有的功能,离线存储的API,生成图形组件等等,它的不足之处,Api不稳定,文档不齐全,自1.0.0之后开始好转. YUI:是由雅虎提供的完备的,扩展良好的网页程序工具集,提供了丰富的功能--例如:(dom操作,Ajax) ExtJs:扩展类库,注重与页面,不足过于臃肿 主要从2.0之后,开始收费. Jquery介绍: 代码规范:同一个对象>=3个链接换行 同一个对象一行换行 代码添加注释:可维护性,可读性 Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库 优势: ------1.轻量级:压缩之后100kb以内 ------2.强大的选择器: ==jquery选择器的优势:1.写法简单 2.支持css1到css3 3.完善的处理机制(容错) jquery--添加元素行为事件 与css区别 是给元素获取对象添加样式 ==分为: |#id 获取id对象 |.class 获取class对象 1.基本选择器 |Element 获取元素对象 |* 获取任意对象 |$("#id,.class,p") 获取多个对象 |$('div p') 获取当前标签下所有子元素 |$('div>p') 获取当前元素下面的子元素 2.层次选择器 |$('div+p') 获取紧跟着当前标签的标签 |$('div~p') 获取当前节点是兄弟节点的标签 |***返回值都是集合 通过集合的each方法隐式遍历 |$('input:first') 页面中当前元素中第一个元素 |$('input:last') 页面中当前元素中最后一个元素 |基本过滤器: |$(':checkbox:not(:checked)');//没有被选择复选框对象 | |$('tr:even');//当前标签下标是偶数 | |$('tr:odd');//根据下标是奇数 | |$('tr:eq('+2+')');//等于 | |$('tr:gt(2)').css('background','yellow');//大于 | |$('tr:lt(2)').css('background','yellow');//小于 | |$('h1:header') //选取标题 | |$(':animated') //动画 | | |$('td:contains("三")').css("color","yellow"); //当前标签内容包涵字符‘三’ | |$('td:empty').css("background","green"); //当前标签内容为空 3.过滤选择器 |内容过滤器: |$('td:has(.c)').css("background","red"); //当前标签含有class | |$("div:not(:parent)").css("background","blue");//当前标签是否包涵子元素 | | |$('div[class]') //查看div样式 | |$('div[class!=sq]') //样式不等于sq |属性过滤器: |$('div[class=sa]') //样式等于sq | |$('div[class^=sa]') //样式开头等于sq | |$('div[class$=sa]') //样式结尾等于sa | |$('div[class*=a]) //样式只要含有a字符 | |$('div[id!=ds][class$=a]') //查看有id并且有样式 | |可见性过滤器: |$('E:hidden') E元素下面隐藏元素 | |$('E:visable') E元素下面显示元素 | | |$('div.one:nth-child(even)') //父元素下标为偶数的元素 | |$('div.one:nth-child(3)') //父元素下标为2的元素 |子元素过滤器: |$('div.one :first-child') //父元素下第一个子元素 如果没有空格div.one:first 表示相同样式第一个孩子节点 | |$('div.one :last-child') //父元素下最后一个子元素 | |$('div.one :only-child') //父元素只有一个孩子节点 | | |$('#form:enabled') 选取所有的可用元素 | |$('#form:disabled') 选取不可用的元素 |表单对象属性过滤器: |$('input:checked') 选取被选中的复选框 单选框 | |$('select:selected') 选取选中下拉列表 | | |:input | |:sumbit | |:text |表单过滤器: |:button | |:hidden | |:file | |:image | |:textear | |:reset ------3.出色的dom操作封装: 1.Jquery与dom是各自独立 举例就说下他们加载的方法 与dom的区别: window.onload() 不能使用两次,会覆盖前者 加载完页面所有的代码才调用 无 $(document).ready() 两次都执行 加载大致 就执行(好处:局部出现了问题,不会影响整个页面) 简写:$(function(){}) 2.互相不能调用里面任意方法 必须进行强转 与dom对象进行转换: dom转换Jquery 通过---$() Jquery转换dom1 通过下标形式 $x[0] 2.通过get方法 $x.get(0) 通过ID等于0 不是ID都可以大于0 DOM 是一种与浏览器 平台,语言无关的接口(dom-core,html-core,css-core) 创建节点:3种方式 1.直接在页面编写 2.$('html代码') 3.$('',{属性}) 插入节点:8种方式 1.append 父类追加一个子元素 appendTo 某个元素追加入某个元素之内 -------------------内后 2.prepend 父类追加一个子元素 prependTo 某个元素追加入某个元素之内 ----------------内前 3.after 将某个元素追加在当前元素的后面 insertAfter 某个元素追加入某个元素之后 ----------------外后 4.before 将某个元素追加在当前元素的之前 insertBefore 某个元素追加入某个元素之前 --------------外前 删除节点:3种方式 remove()--移除节点,返回删除的标签 empty() --移除节点,并保留当前的位置 detach()--分离节点 等同于删除 替换节点:2种方式 replaceWith() 替换某个节点 replaceAll() 克隆节点(复制): clone(true) 复制某个节点 加上true表示克隆出来节点,可以继续克隆 包裹节点: wrap() 将某个元素包裹起来 wrapAll() 某个元素包裹某个元素 wrapInner() 给某个节点的内容包裹起来 属性操作: attr() 获取属性 --------------- 与css()方法的区别 attr操作dom属性 css操作样式属性 attr('size','12') 设置属性 removeAttr('size')删除属性 样式操作: addclass("class") 给某个元素添加样式 removeClass('多个参数') 删除样式 hasClass('样式名') 是否包涵样式 is(':c选择器') 设置Html文本值: html() 获取html内容 html("
") 设置html内容 text() 获取文本值 text('sss') 设置文本值 val() 获取值 val('123') 设置值 遍历节点: children() -获取直接子元素 find() -获取所有子元素 next() -获取后面紧跟的元素 prev() -获取前面紧跟的元素 siblins() -获取前后紧邻的元素 closest() -获取最近的匹配元素 ...展开收缩