● Jq模板
○ <script type="text-jquery-tmple" id="d"><td>${属性}</td></>
○ ${"#trTemp"}.tmpl(绑定的类)
● jq 就是 javaScript 的库。
○ 底层使用的是javaScript
● 项目中添加库
○ 可以去官网下载复制到项目中去，并引用
○ 如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
○ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script> google（Google大家懂得的建议使用下面的）
○ <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script> 微软
● jQuery 语法
○ 查找对象 + 操作对象
● jQuery 选择器
○ jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
○ jQuery 使用 CSS 选择器来选取 HTML 元素。
■ $("p") 选取 <p> 元素。
■ $("p.intro") 选取所有 class="intro" 的 <p> 元素。
■ $("p#demo") 选取所有 id="demo" 的 <p> 元素。
○ jQuery 使用 XPath 表达式来选择带有给定属性的元素。
■ $("[href]") 选取所有带有 href 属性的元素。
■ $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
■ $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
■ $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
○ $(this)
■ 当前的元素
○ $("div#intro .head") 组合选取 id=intro class=head 的div标签
○ $(" h1 ,p,div") 多选
● jQuery 事件函数
○ $(document).ready() 底层调用的就是 document.onload() 方法。
● jQuery 动画
○ toggle()
■ 就是 hide () 和show（）的结合
○ Fading 淡入淡出
■ $(selector).fadeIn(speed,callback);
● 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
● 可选的 callback 参数是 fading 完成后所执行的函数名称。
● 下面的例子演示了带有不同参数的 fadeIn() 方法：
■ $(selector).fadeOut(speed,callback); 同上
■ $(selector).fadeToggle(speed,callback);
● fadein 和 fadeout 的结合
○ slide 滑入
■ 用法和上面基本一样
■ $(selector).slideUp(speed,callback);
■ slideToggle() 和 slideDowdn（）
○ 自定义动画
■ $(selector).animate({params},speed,callback);
● 必需的 params 参数定义形成动画的 CSS 属性。(移动后的样式中间会自动帮助补齐)
● 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
● 可选的 callback 参数是动画完成后所执行的函数名称。
○ Tip
■ 许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数
■ hide()可以传参
○ jQuery 方法链接
■ 可以在后面加上其他动画当点击的时候按照顺序执行。
● jQuery DOM 操作
○ 对元素的属性 内容 文本操作
○ 没有参数的时候不进行修改 只是取返回值
■ text() - 设置或返回所选元素的文本内容
■ html() - 设置或返回所选元素的内容（包括 HTML 标记）
■ val() - 设置或返回表单字段的值
○ attr() 一个参数的时候取的是这个属性的只 在跟一个参数就是对这个属性进行设置
○ 添加
■ append() - 在被选元素的结尾插入内容
● 可传入多个参数
● 在元素的 这里</> 结束之前加上 一般多用于 列表添加新的项
■ prepend() - 在被选元素的开头插入内容
● 这个和apped() 方法相似 只是添加的地方不一样 <>这里
■ after() - 在被选元素之后插入内容
■ before() - 在被选元素之前插入内容
○ 删除
■ remove() - 删除被选元素（及其子元素）
■ empty() - 从被选元素中删除 子元素 只删除子元素
○ 操作 CSS
■ 只有类可以 重复所以操作的只有类 没有 id
■ addClass() - 向被选元素添加一个或多个类
■ removeClass() - 从被选元素删除一个或多个类
■ toggleClass() - 对被选元素进行添加/删除类的切换操作
■ css() - 设置或返回样式属性
● css("propertyname"); 返回样式的值
● $("p").css("color","red"); 设置样式的值(设置一个)
● css({"propertyname":"value","propertyname":"value",...});设置多个
○ 元素尺寸
■ width()
■ height()
■ innerWidth()
■ innerHeight()
■ outerWidth()
■ outerHeight()
● 遍历 -元素关系
○ 祖先
■ parent()
● parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
■ parents()
● parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
■ parentsUntil()
● parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
● 后代
○ children() 方法返回被选元素的所有直接子元素。 只要是直接子元素才可以
○ find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
● 同胞
○ siblings()
■ 方法返回被选元素的所有同胞元素。不包括自身
○ next()
■ next() 方法返回被选元素的下一个同胞元素。
○ nextAll()
■ nextAll() 方法返回被选元素的所有下面的同胞元素。
○ nextUntil()
■ nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
○ prev()
○ prevAll()
○ prevUntil()
○ prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
● 过滤
○ 三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
○ first() 方法返回被选元素的首个元素
○ last()
○ eq() 方法返回被选元素中带有指定索引号的元素。
○ filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
■ $("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素
○ not() 方法返回不匹配标准的所有元素。
■ not() 方法与 filter() 相反。
9466
04-18
04-18
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
