三十四、jquery练习 手机点餐demo

一、所用知识点：

1.jquery事件绑定方法：

(1) bind():类似于js中事件的监听方法；

   语法:  $(selector).bind(event,data,function,map)

selector:被选元素；

event:添加到元素的事件（一个或多个）；

data:可选，传递到函数的额外数据；

function:执行函数；

map:事件映射 ({event:function, event:function, ...})

(2) on(): 向元素添加事件处理程序

语法：$(selector).on(event,childSelector,data,function) 

   childSelector：可选，规定只能添加到指定的子元素上的事件处理程序；

(3) 元素.方法(function(){})：最常用的事件绑定方法

eg: $(“div”).click(执行函数)

 

2.jquery事件移除方法：

(1)unbind() :从被选元素上移除添加的事件处理程序

语法：$(selector).unbind(event,function,eventObj)

(2)off():移除通过 on() 方法添加的事件处理程序

语法：$(selector).off(event,selector,function(eventObj),map)

注意：off()其实也可以移除bind()绑定的事件

 

3.jquery遍历方法：列举几个常用的

add() 把元素添加到匹配元素的集合中;

children() 返回被选元素的所有直接子元素

find() 返回被选元素的后代元素 //注意find()是所有后代 children()只指儿子

each() 为每个匹配元素执行函数 //相当于js中的遍历循环

eq() 返回带有被选元素的指定索引号的元素

next() 返回被选元素的后一个同级元素

prev() 返回被选元素的前一个同级元素

parent() 返回被选元素的直接父元素

parents() 返回被选元素的所有祖先元素 //注意区别

siblings() 返回被选元素的所有同级元素

slice() 把匹配元素集合缩减为指定范围的子集

blur() 添加/触发失去焦点事件

4.jquery HTML/CSS常用方法

addClass() 向被选元素添加一个或多个类名;//与js不同的是无需写已有的类名称

removeClass() 从被选元素移除一个或多个类 

after() 在被选元素后插入内容

before() 在被选元素前插入内容 

append() 在被选元素的结尾插入内容

appendTo() 在被选元素的结尾插入 HTML 元素 

attr() 设置或返回被选元素的属性/值

eg:console.log($("#bn").attr("value"));//获取 只能单个获取
$("#bn").attr("value","点我");//设置单个属性
$("#bn").attr({   //设置多个属性
    "value":"点击",
    "type":"text"
})

prop() 设置或返回被选元素的属性/值 //用法和attr()一致

css() 为被选元素设置或返回一个或多个样式属性 

html() 设置或返回被选元素的内容

text() 设置或返回被选元素的文本内容 

remove() 移除被选元素（包含数据和事件）

empty() 从被选元素移除所有子节点和内容 

replaceAll() 把被选元素替换为新的 HTML 元素

 

二、步骤

1.基础界面 样式

注意：调试需使用手机调试界面，这里手机型号为iPhone6 Plus;

另外手机字体无法通过字体大小设置调整，需在head标签内添加手机自适应语句：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maxinum-scale=1.0,user-scalable=no">
<!--手机app自适应大小-->

 

2、点击购物车 显示选择商品同时创建一行商品栏

   需要动态创建dom元素：