jQuery和CSS概览.ppt

什么是jquery jQuery是一套Javascript脚本库. 如下特点: 1.提供了强大的功能函数 使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁. jQuery的特点 2.解决浏览器兼容性问题 javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. jQuery中的Event事件对象已经被格式化成所有浏览器通用的,让我们可以在所有浏览器中使用event.target获取事件对象. jQuery的特点 3.实现丰富的UI jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 使用jQuery就可以帮助我们快速完成此类应用. Jquery选择器 在jQuery中有多种选择器，用于选取特定内容进行操作： 基本选择器包括id选择器，类型选择器，类选择器. Id选择器根据元素的id选择，语法为 $ “#idName” 类型选择器根据元素的名选择，语法为 $ “#elementName” 选择器 类选择器是根据元素的css样式进行选择，语法为 $ “.className” Eg:jqueryDemo/basicSelecter.jsp 层级选择器 层级选择器包括：关系选择器、子元素选择器、定位过滤器、内容过滤器、可见过滤器、属性选择器、表单选择器和高级表单选择器 关系选择器，例如 $ “form div” 匹配表单下所有的input元素 $ form div 匹配表单下所有的子级input元素 关系选择器 $ “label + input” 匹配所有跟在label后面的input元素 $ “form ~ input” 匹配所有与表单同辈的input元素 Eg:jqueryDemo/relationSelecter.jsp 子元素选择器 :nth-child 匹配父元素下第n个子元素或奇偶元素 :first-child 匹配第一个子元素 :last-child 匹配最后一个子元素 :only-child 匹配某一个元素 Eg:jqueryDemo/childSelecter.jsp 定位过滤器 $ “tr :first” 设置第一行第一列 $ “tr :eq 0 ” 设置第一行第一列 $ “tr :even” 设置偶数格（从左至右，从上往下） $ “tr :gt 3 ” 设置第四格及以后 从0开始 （从左至右，从上往下） $ “tr :lt 4 ” 设置1~4格 Eg:jqueryDemo/positionSelecter.jsp 内容过滤器 $ “ul :empty” 匹配ul中空的li $ “div li:parent” 匹配div包含的ul中包含子元素的li $ “h2 :contains ‘content’ ” 匹配h2元素中包含“content”文本内容的 $ “p :has span ” 匹配包含span的p元素 Eg:jqueryDemo/contentSelecter.jsp 属性选择器 $ “div[id]” 查找所有包含id属性的div元素 $ “input[name ‘text’]” 查找name的属性值为’text’的input元素 $ “input[name^ ‘text’]” 查找name属性值以’text’开始的input元素 $ “input[name$ ‘text’]” 查找name属性值以’text’结束的input元素 $ “input[name* ‘text’]” 查找name属性值包含’text’的input元素 Eg:jqueryDemo/attrSelecter.jsp 表单选择器 :input 匹配所有input元素 :text 匹配所有text元素 :password 匹配所有password元素 :checkbox :submit :image :reset :button :file :hidden 高级表单选择器 :enable 匹配所有可用元素 :disable 匹配所有不可用元素 :checked 匹配所有被选中的元素 不包括select的option :selected 匹配所有选中的option元素 常用属性操作 设置属性： $ “p” .attr “title”,”段落文本” ; 获取属性： $ “p” .attr “title” ; 删除属性： $ “p” .removeAttr “title” ; 常用样式操作 追加样式： $ “p” .addClass “redColor” ; 移除样