我给bia娘写的交互参考1

好开心，能给女王大人写一些她能用到的东西，觉得自己有点用了呢。我就借我自己总结的东西，一步步的给bia娘说说我理解的交互。对于交互，我概念很浅，我相信在我整理完jQuery +ajax的内容后，我也会对交互有一个新的概念。

bia，请听我说。

第一部分，我就以jQuery的简单应用开说，以下是我的案例。

1、jQuery选择元素

————————————————————————————————

先看这

两个按钮的处理。

按钮代码如下：

对应js如下：

function showDiv(){$("#targetDiv").show();
}

jQuery选择元素不像传统的js要点点点点一串，jQuery只需用$("#targetDiv")即可获取。

其中①选择标签对应元素，如img，div，则$("img")获取；

②选择id对应元素，则$("#targetDiv")获取，ID前加#；

③选择css对应元素，则$(".top")获取，css类名前加点；

④想获取多种关系的，只需连着写，如获取div下id为"bia"的元素，用$("div #bia")获取，又如获取css为"top"的id为"bia"的元素，用$(".top #bia")获取。

我们获取到div，调用了jQuery提供的方法show()以显示元素，同样调用hide()以隐藏元素。

2、jQuery挂载事件

————————————————————————————————

再看两个按钮的处理。

按钮代码为<input type="button" id="but1" style="width:120px" value="显示div2"></input>

这两个按钮我并没有写onclick事件，我在js中写了事件监听以获取id元素的点击事件：

$(function() {$("#but1").click(function(){showDiv();});$("#but2").click(function(){hideDiv();});
});

获取元素后调用click()方法即可捕捉元素的click事件，括号中写的方法，为响应函数。

这种写法用于按钮太多，监听事件处理重复，写起来也很方便。

3、jQuery改变元素html内容

————————————————————————————————

再看

两个按钮的处理。

在此处，我们具体讲下如何修改元素中的html内容，响应js如下：

function changeDivContent(){$("#targetDiv").empty();$("#targetDiv").append('<img src="./image/bia2.jpg" style="width:200px;height:200px"/>');showDiv();
}

我们获取到div元素，首先调用empty()方法清空其中内容，在调用append()方法，将更新的html代码写进入，注意：要写成字符串形式哦~

实现起来很简单是吧~这个功能也就是ajax中常用到的响应方式，我们在后台处理后，将新的json处理成html代码，或者直接接收html代码（字符串），将局部的内容更新，以此实现局部交互。

4、jQuery修改元素样式

————————————————————————————————

再看两个按钮的处理。

我们通过jQuery直接修改元素样式，js代码如下：

function getBig(){if($("#targetDiv").css("width") == "300px"){alert("(●—●)再大伦家受不了了呢~");return;}$("#targetDiv").css("width","300px");$("#targetDiv").css("height","300px");$("#targetDiv img").css("width","300px");$("#targetDiv img").css("height","300px");showDiv();
}

首先我们通过$("#targetDiv")获取元素，之后调用css()方法，$("#targetDiv").css("width")即可获取到id为“targetDiv”元素的“width”参数值。

我们也可调用css()函数直接修改属性值，如$("#targetDiv").css("width","300px")直接修改id为“targetDiv”元素的“width”参数值为“300px”。

以上是我总结的jQuery的基本操作，结合demo相信bia一定学很快哦，想想以后数钱的画面，激动的很呢~mua~

转载于:https://www.cnblogs.com/peachzhan/p/4506182.html

我给bia娘写的交互参考1相关推荐

[转载]搜集整理：平水韵仄韵字一览表，写古体时参考
原文地址:搜集整理:平水韵仄韵字一览表,写古体时参考作者: 一抹霞光仄韵: 上声一董:董懂动孔总笼[东韵同]拢桶捅蓊蠓汞上声二肿:肿种[种子]踵宠垅[陇]拥冗重[轻重]冢捧勇甬踊涌俑蛹恐拱竦悚耸 ...
写给交互设计新手的信息架构全方位指南
目录什么是信息架构? 通用方法日常工作可以关注的大神常用工具相关书籍什么是信息架构? 信息架构是一个比众多其他领域更难定义的领域.内容策划由内容策划师来完成,交互设计由设计师来完成,而信息 ...
简单报价单模板_圣诞节祝福邮件必这样写【附件参考模板BY埃马】
放假通知书埃马公众号放假通知亲爱的各位同学您们好 : 我公众号[埃马外贸之家]将在2019年12月16日至2020年2月2日放假.今天的文章是2019年最后的一次分享.我将在2020年2月 ...
证券投资方向，什么论文选题好写且可参考数据多呢？
当今时代越来越多的人喜欢证券投资这一领域的知识了,因为这些知识可以在短期之内变现,满足了大多数人的追求.但是很多人都不知道这门课的知识点是极其深奥的.它以其深奥的知识点征服了无数的学生,尤其是论文是非 ...
网吹钱伟长写论文“不必参考任何文献”，但这的确不符合学术规范
点击下方卡片,关注"CVer"公众号 AI/CV重磅干货,第一时间送达作者 | 陈彩娴编辑 | 刘冰一本文转载自:AI科技评论近日,钱伟长先生在2002年发表于其创立的 ...
Android与JSP javaweb交互参考文章
Android之使用JavaWeb项目作为后台的实现 android客户端+JAVA WEB服务器实现json数据解析首先,项目中使用javaweb作为后台服务器,源码地址:服务器和客户端源码地址. ...
[转]如何写一份交互说明文档
转载请注明来处,关注我,请点击:http://weibo.com/heidixie 离开交互圈已经有段时间了.但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上 ...
APA、MLA、芝加哥格式要求下的注释性参考文献目录(Annotated Bibliography)怎么写？
什么是注释性参考文献目录(Annotated Bibliography)? 注释性参考文献(annotated bibliography)是一份参考文献列表,包括书籍.论文和其他出版物,通过总结.解释 ...
用Java写一个PC端的WIFI-ADB管理软件
废话一直在用android studio做android开发,偶然一次机会接触到了wifi adb,试了好几个支持android studio的插件,各有优缺点,有一个本来用着好好的,突然就用不了, ...

我给bia娘写的交互参考1

我给bia娘写的交互参考1相关推荐

最新文章

热门文章