我给bia娘写的交互参考1

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

bia,请听我说。

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

1、jQuery选择元素

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

先看两个按钮的处理。

按钮代码如下:

<input type="button" onclick="showDiv();" style="width:120px" value="显示div"></input>

对应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~

时间: 2024-10-24 17:33:42

我给bia娘写的交互参考1的相关文章

工科老师要学生看全武媚娘 写千字感想

工科老师要学生看全武媚娘 写千字感想 工科老师要学生看全武媚娘 写千字感想 http://www.ebay.de/cln/zrw_b24/2015-03-20/189983094014http://www.ebay.de/cln/uhywen_jznawjver/2015-03-20/189992508012http://www.ebay.de/cln/eil-a26/2015-03-20/189992509012http://www.ebay.de/cln/jinlthd/2015-03-20

写一个交互脚本,实现能够定义主机名及IP地址

写一个交互脚本,实现能够定义主机名及IP地址 脚本内容↓ [[email protected] scripts]# cat xiugaizhuji.sh #!/bin/bash ############################################################# # File Name: jiaohu.sh # Version: V1.0 # Author: clsn # Organization: http://blog.znix.top # Create

Bia 娘 js 教程第一讲——“亲爱的,我们来聊聊天”

JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给 HTML 网页增加动态功能. 巴拉巴拉巴拉,你把上面的东西读完了,那你也就晕了.因为我看了 n 遍,我就只明白一点,js这东西,好牛逼哇.我不仅又想,它牛逼,那么它一定要帮我做一件事,这件事,我用 html完成不了,这件事就是——让我的网页“活

手把手教你写个AOP框架

Why AOP? AOP(Aspect-Oriented Programming),意思是面向切面编程.传统的OOP面向对象相当于站在一个上帝模式从上往下看,里面的一块块都是一个对象,由我任意组合:而AOP不同之处在于,他是以一个旁观者的身法,从"侧面"看整个系统模块,看看哪里可以见缝插针,将自己想要处理的一段义务逻辑编制进去. Code duplication is the ultimate code smell. It's a sign that something is very

安卓高级 WebView的使用到 js交互

我们先来学习 怎么使用再到用js和安卓源生方法交互 WebView简单使用 此部分转载并做了补充 原博客 原因:比较简单不是很想在写,我只要写js交互部分 WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要处理解析,渲染网页等浏览器做的事情 setWebChromeClient:辅助WebView处理Javascript的对话框,网站图标,网站ti

这交互炸了(二):爱范儿是如何让详情页缩小为横向列表的

写在前面: 写这段话的时候,已经是夜里3点了.别问我为什么这么拼,一切为了与你分享干货!!!! 不要太感动,擦擦眼泪继续往下看. 本开源库链接 ExpandableViewpager 一直想写<交互炸了>第二篇,但是好像没什么好的交互.就在昨晚11点,小马同学提出 爱范儿 里面的交互挺炸的.我一下,果然很赞.于是连夜写代码,封装成库,再撸文章.只为在周一早7:00能献给爱技术的你.. <交互炸了>或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效以及实现的思路.特效实现本身也

那些用JavaScript写的操作系统

之前有人说过Chrome是新的C语言运行环境(Chrome Is The New C Runtime) ,不过笔者更倾向于Web是新的C语言运行环境,而且这种技术绝对没有版权问题,也绝不会被一家公司垄断.下面是几个在Web上模拟几个操作系统的例子. Linux模拟器 演示地址:http://bellard.org/jslinux/ 技术文档:  http://bellard.org/jslinux/tech.html 支持绝大部分linux命令,还可以使用vi且可以保存. 作者其人:Fabric

在EF的code frist下写稳健的权限管理系统:界面设计(四)

基本都是采用pure设计(中文官网:http://purecss.org,英文官网:http://purecss.io).pure只是一个简单强大的cssUI库,支持响应式设计,适合自己设计或者给美工设计,定制强大.当然,脚本还是得自己写. pure参考文章:http://www.cnblogs.com/RainbowInTheSky/p/4475360.html,http://www.cnblogs.com/RainbowInTheSky/p/4481552.html,http://www.c

[Python]webservice学习(2) --自己写soap消息请求服务

上文中webservice学习(1) ,使用soaplib建立了一个超简单的webservice服务,也是用suds调用成功了,那如果想使用http包自己组成一个soap消息来调用接口怎么办呢? 这个时候我们就想到使用wsdl这个文件了,我看了些wsdl的文档,也参照这其他人使用java,php等语言实现的soap消息调用的格式来写,但是怎么调试都没成功.. 就是说他总是会返回500或者是405各种错误,就是下面代码中的old_soap_body 变量中的消息格式. #coding: utf-8