python 聊天窗口相关

scrollHeight返回元素的完整的高度,以像素为单位.
当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 不同,offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
这个属性是非标准的,所以在不同浏览器中可能会存在差异,例如:
在Firefox浏览器中:
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
IE浏览器中:
指这个对象它所包含的对象的高度加上border的高度和margin

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

 

scrollHeight返回元素的完整的高度,以像素为单位.
当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 不同,offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。

jQuery 效果 - animate() 方法

实例

改变 "div" 元素的高度:

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

搜索



这个属性是非标准的,所以在不同浏览器中可能会存在差异,例如:
在Firefox浏览器中:
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
IE浏览器中:
指这个对象它所包含的对象的高度加上border的高度和margin

 

jQuery 事件 - delegate() 方法

实例

当点击鼠标时,隐藏或显示 p 元素:

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

 

请参考下面这段初始HTML代码:

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

我们为<div>中的所有<p>元素绑定点击事件:

// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").delegate("p", "click", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

运行代码(其他代码请自行复制到演示页面运行)

如果要绑定所有的<p>元素,你可以编写如下jQuery代码:

//为所有p元素绑定click事件处理程序(body内的所有p元素,就包含所有的p元素)
//n2、n3、n5均可触发该事件
$("body").delegate("p", "click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

此外,我们还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:

var data = { id: 5, name: "李四" };

//为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data
//附加数据可以是任意类型
$("body").delegate("#n5", "mouseenter mouseleave", data, function(event){
    var $me = $(this);
    var options = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好," + options.name + "!");
    }else if(event.type == "mouseleave" ){
        $me.html( "再见," + options.name + "!");      
    }          
} );

每次遇到json loads/dumps始终搞不清方向,写段代码试下:

 

[python] view plain copy
 
 print?
  1. import json  
  2.   
  3. dict_ = {1:2, 3:4, "55":"66"}  
  4.   
  5. # test json.dumps  
  6.   
  7. print type(dict_), dict_  
  8. json_str = json.dumps(dict_)  
  9. print "json.dumps(dict) return:"  
  10. print type(json_str), json_str  
  11.   
  12. # test json.loads  
  13. print "\njson.loads(str) return"  
  14. dict_2 = json.loads(json_str)  
  15. print type(dict_2), dict_2  

 

 

程序结果:

<type 'dict'> {'55': '66', 1: 2, 3: 4}
json.dump(dict) return:
<type 'str'> {"55": "66", "1": 2, "3": 4}


json.loads(str) return
<type 'dict'> {u'55': u'66', u'1': 2, u'3': 4}

 

总结:

json.dumps : dict转成str

json.loads:str转成dict

如此简单。

 

 

parse用于从一个字符串中解析出json对象,如

1
var str = '{"name":"huangxiaojian","age":"23"}'

结果:

1
2
3
4
5
6
7
JSON.parse(str)
 
Object
 
age: "23"
name: "huangxiaojian"
__proto__: Object

注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。

stringify()用于从一个对象解析出字符串,如

1
var a = {a:1,b:2}

结果:

1
2
3
JSON.stringify(a)
 
"{"a":1,"b":2}"

 

 

$.each遍历json对象

 

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象。

复制代码
var json = [
    {"id":"1","tagName":"apple"},
    {"id":"2","tagName":"orange"},
    {"id":"3","tagName":"banana"},
    {"id":"4","tagName":"watermelon"},
    {"id":"5","tagName":"pineapple"}
];
 
$.each(json, function(idx, obj) {
    alert(obj.tagName);
});
复制代码

上面的代码片断工作正常,提示 “apple”, “orange” … 等,如预期一样。

问题: JSON 字符串

下面的例子中,声明了一个JSON字符串(随附单或双引号)直接地。

复制代码
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
 
$.each(json, function(idx, obj) {
    alert(obj.tagName);
});
复制代码

 

在Chrome中,它显示在控制台下面的错误:

Uncaught TypeError: Cannot use 'in' operator to search for '156' 
in [{"id":"1","tagName":"apple"}...

解决方案:JSON字符串转换为JavaScript对象。
要修复它,通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。

复制代码
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
 
$.each(JSON.parse(json), function(idx, obj) {
    alert(obj.tagName);
});
 
//or 
 
$.each($.parseJSON(json), function(idx, obj) {
    alert(obj.tagName);
});


posted @ 2017-01-12 10:47  猪啊美  阅读(131)  评论(0)    收藏  举报