JQurey|JQuery(笔记)

1.jQuery定义

jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 它的设计思想是write less,do more

2.为什么使用jQuery? (1)js实现隔行换色
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53

(2)jQuery实现隔行换色
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53



3.jQuery语法结构
$(selector).action() ; ? 工厂函数$():将DOM对象转化为jQuery对象 选择器 selector:获取需要操作的DOM 元素 方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

4.引入jQuery类库

5.jQuery-HelloWorld-实现弹出提示框

6.jQuery应用实战 6.1addClass( )添加样式
.h{ background:red }?
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53


6.2css( )设置样式
?
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
?


6.3show( )、hide( )元素显示和隐藏
This is a paragraph.


6.4next()链式操作
?
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
?? 解析:通过next()方法显示的是当前位置的下一个 ?


6.5css({})隐式迭代
$(function() { $("li").css({"font-weight":"bold","color":"red"}); }); 解析:<因为前面li是一个隐形的数组,所以可以设置多个样式>

案例:
? 这是标题这是一个段落。
这是一个段落。
这是一个段落。
这是一个段落。


6.6 DOM对象和jQuery对象的转化
(1)DOM对象转为jQuery对象
var txtName =document.getElementById("txtName"); //DOM对象 var $txtName =$(txtName); //DOM对象转化为jQuery对象 ?

(2)jQuery对象转为DOM对象
第一种方式:
var $txtName =$ ("#txtName"); //jQuery对象 var txtName =$txtName[0]; //DOM对象

第二种方式:
var $txtName =$("#txtName"); //jQuery对象 var txtName =$txtName.get(0); //DOM对象

案例:
.h{ background:red }?
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53

7.扩展-初始化函数-$(document).ready()与window.onload的区别
window.onload $(document).ready()
执行时机 flash、视频等)才能执行 网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 $(function(){ //执行代码}) ;
案例:
?
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53


??

案例2:同一页面能同时编写多个*



【JQurey|JQuery(笔记)】

??





???

?
序号订单号商品名称价格
13253价35
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53
24商品53称价53





    推荐阅读