Honeyc's Blog

JS+JQuery基础

发表于 | 分类于 | |

访问DOM三种方式

1
2
3
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

JQuery选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(1).基本选择器 
$("*")  $(".class") $("#id")  $("div")  $("div.class") 
(2).属性选择器   
$("input[value=0]") $("p[class*=content]"),$("p[id][class$=Menu]")
(3).内容选择器
$("div:contains('username')") , $("div:has(span)")
(4).层次选择器
$("div span")祖先为div，$("div.menu > span")父亲为span
$("prev + next") 紧跟在prev后面与prev同辈的next
$("#menu ~ div") 与id为menu后面的同辈的div
(5).表单选择器 
$("input:checked")
(6).可视性选择器
$("div:visible"),$("div:hidden")
(7).筛选选择器
$("tr:even"):保留索引为偶数的
$("tr:odd"):保留索引为奇数的
$("li:first"):保留第一个
$("li:last"),$("div:eq(5)"),$("li:gt(1)")

筛选JQuery对象标识的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.eq(index)
$("div").eq()
.filter(selector or element or function(index) or index or object)
$("option").filter(function(index){return (this.value>5); });
.first()  .last()  .has(selector or element)  .not()   .slice()
上下级：.children([selector])  .parent([selector]) .parents([selector])
平级：.prev() .prevAll()  .siblings([selector])
查找：.find(selector or element or object)
.next([selector]) .nextAll()
遍历：.each(function(inedx,Element)) .map(function)
eg: $("p").each(function(index){$(this).html(index);})
.map()返回的是一个新的jquery对象，包括每次迭代返回的值,get()返回数组，join()拼接
var listValues = $("li").map(function(index){
return $(this).html();}).get().join(",");

浏览器事件

流程： 发生物理时间->在浏览器中触发事件->浏览器创建事件对象->调用用户定义的事件处理程序
事件处理过程分为三个阶段：捕获阶段 目标阶段 冒泡阶段
(1).初始化

1
2
js:<body onload="function()">
jquery:$(document).ready(funtion(){});$(document).load(function(){//其他资源都加载完再加载});$(funcion(){});

(2).js对元素进行事件监听 .addEventListener(‘click’,function())
(3).使用jQuery指定事件处理程序
on(events,[selector],[data],hander(eventObject))
on(events-map,[selector],[data])
off(events,[selector],hander(eventObject))
off(events-map,[selector])
辅助函数：
obj.click(dataObj,function handler(e){})
obj.hover(function enterhandler(e){},function leaveHandler(e){])

1
2
3
4
5
6
7
8
9
 eg:
function clickHandler(e){
     $("#"+edata.objId),html(e.target.id+"says "+e.data.answer+"at x position:" + e.screenX);
}
$(document).ready(function(){
     $("#div1").on({"click":clickHandler},
                     {"objId":"heading","answer":"yes"});
     $(document).on("click","#div2",{"objId":"heading","answer":"no"},clickHandler);
})

(4).手工触发事件
js:
obj.click() –>三个步骤 a = document.createEvent(“MouseEvnets”); a.initClick(“Click”);obj.dispatchEvent(clickEvent);
jquery:
$(“span”).click()
$(“.checkbox”).trigger(“click”)
$(“input.bigText”).trigger({“type”:”keypress”,”charCode”:13})

(5).创建自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
js: 
var myEvent = document.createEvent("CustomEvent");
myEvent.initCustomEvent(
"worldEnds",true,false,{'fire':false,'ice':false,'time':new Date()});
通过对DOM对象调用方法dispatchEvent()触发它
var obj = document.getElementById("#notify");
obj.dispatchEvent(myEvent);
通过addEventListener()
document.addEventListener("worldEnds",endOfWorldHandler,false);
JQuery:
var createEvent = $.Event("worldEnds",{'fire':false,'ice':false,'time':new Date()})
$.event.trigger(cystEvent);
$(document).on("worldEnds",endOfWorldHandler)

(6).ajax跨域
1、为了复用，减少重复开发，单独开发了一个用户权限管理系统，共其他系统获取认证与授权信息，暂且称之为A系统；调用A系统以B为例。在B系统中用ajax调用A系统系统的接口(数据格式为json)，当时特别困惑，在A系统中访问相应的url可正常回返json数据，但是在B系统中使用ajax请求同样的url则一点儿反应都没有，好像什么都没有发生一样。可能是ajax跨域问题，于是就将这个问题当做跨域问题来解决了。jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。
找到一种解决方式

jsonp:是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享。维基百科jsonp

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
  var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
      +"?id=1&callback=?';
  $.ajax({
    url:url,
    dataType:'jsonp',
    processData: false, 
    type:'get',
    success:function(data){
      alert(data.name);
    },
    error:function(XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest.status);
      alert(XMLHttpRequest.readyState);
      alert(textStatus);
    }});
  });

服务器端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@RequestMapping(value = "/getGroupById")
  public String getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException {
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    String json = JsonConverter.bean2Json(result);
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    out.print(callback + "(" + json + ")");
    return null;
  }

1
2
3
4
5
6
#jsonp格式：
callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

2、把script元素的src属性设成一个回传JSON的URL是可以想像的，这也代表从HTML页面通过script元素抓取JSON是可能的。然而，一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在script元素运行，从src里URL回传的必须是可运行的JavaScript。在JSONP的使用模式里，该URL回传的是由函数调用包起来的动态生成JSON。

1
2
3
4
5
<script type="text/javascript"
         src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">
</script>
 #  返回
 parseResponse({"Name": "小明", "Id" : 1823, "Rank": 7})

(7).回调和闭包

回调定义:回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。

1.AJAX的异步加载时用到了回调函数的
2.同步中的使用

1
2
3
4
5
6
7
8
var func1=function(callback){
    //do something.
    (callback && typeof(callback) === "function") && callback(); //检测函数存在且是一个函数然后再调用
}
func1(func2);
    var func2=function(){
}

闭包定义:定义在一个函数内部的函数，但是呢，这个里面的函数他访问了他外面的那个函数的变量。

1
2
3
4
5
6
7
8
9
10
function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10); //16 第一次调用
bar(10);  //17   第二次调用
//在foo函数中已经形成了一个闭包，这就意味着，只要bar函不死，垃圾回收机制就不敢去动foo函数，而此时，我们的bar函数所指向的那个匿名函数就可以一直去访问那个tmp和x,且每次调用，都会得到上一次被自增了以后的tmp