jquery整理

Posted 2020-09-29 莫轩ASL

$.extend扩展
Jquery的bin绑定事件，unbind取消所有事件
Jquery学习地址:http://www.runoob.com/jquery/jquery-plugin-validate.html
Jquery学习地址：http://www.haorooms.com/post/jquery_selecter_zj
使用ajax的jsonP跨域请求数据，需要在服务器对数据进行处理
    ajax跨域请求会传过来一个参数如callback
    判断这个参数是否为空
    不为空时取出值，使用request.getWriter().println(callback+”(”json对象+”)”)
Window.loaction.href=””跳转
框架不能按照意愿修改
框架前段离不开Ajax，后端离不开servlet
.toFixed(2)保留两位小数
.prop("checked",true/false)设置是否被选中
.prop("checked")判断是否被选中
.parseDouble("String")转换为小数
.find("td")找到子类名称标签
each(cks,function(i,obj){})obj为DOM文档对象
原始的javascript取值：
getElementById(id)  document  dom1&2
getElementsByClassName(name)  document  dom3
getElementsBy Name(name)  document  dom1&2
getElemenstByTag Name(name)  document  dom1&2
getElementsByTag NameNS(name)  document  dom1&2
dom1&2支持IE8以下及以上版本
dom3支持IE9以上版本(html5最新标签)
原始的javascript对表格、或者其它节点操作非常复杂的,考虑兼容性的问题，
各版本语法不一致
onClick:IE8及以下没有问题的，火狐用 click
jquery 最核心的、最强大的 是它的选择器
页面加载完成后：
    $(document).ready(function(){
});
$(funcution(){
});
JavaScript与jquery初始化区别：
    Window.onload=function(){
        alert(‘a’);
};
Window.onload=function(){
        alert(‘b’);
};
只输出b，后面的onload事件覆盖前面的onload事件
执行时机：必须等待网页中的内容执行完成后才能执行(包括图片)
$(document).ready(function(){
    alert(‘a’);
});
$(funcution(){
    alert(‘b’);
});
依次输出a、b累加操作
执行时机：网页中所有的DOM结构绘制完成后就执行，可能元素关联的内容并没有加载完

将值转换为number类型：
        parseInt(this.value);
查找父级或兄弟级节点：
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从元素开始找,等同于$("p span")
根据class取得多个对象，并取得他们的值：
    $(‘.mycount‘).each(function(){ arr.push(parseInt($(this).val())); });
标签显示内容设值：
    .text(vale);
    .html(value);
表单value设值：
    .val(value);
移除一行数据：
    $(this).parents(‘tr‘).remove();
复选框是否被选中
    .is(‘:checked‘)
复选框设值，是否被选中
    .attr(‘checked‘,’true’);
    .removeAttr("checked");
复选框已选中个数：
　　$(".ck:checked").length;
遍历选中复选框：
　　$(".ck:[checked]").each(function(){});
　　$(".ck:checked").each(function(){});
循环遍历
$.each(数组，事件(下标，对象));
$.each(对象，事件(键，值));
$.each(数组对象，事件(下标，对象));
DOM节点操作：
在选择器的里面的最后面添加 标签内容
 选择器.append(“标签内容”);   
  <p>Hello</p>
 $(“p”).append(“<h1>你好</h1>”);  
 结果：  <p>Hello <h1>你好</h1> </p>
在选择器的里面的最前面添加 标签内容
选择器.prepend(“内容”)  
<p>Hello</p>
 $(“p”).prepend(“<h1>你好</h1>”);  
 结果：  <p><h1>你好</h1>Hello  </p>
把选择器元素全部删除
 选择器.remove();                
 <p>Hello, <span>Person</span> <a href="#">and person</a></p>
 $(“p”).remove();
把选择器元素里面的内容删除
选择器.empty();                
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
 $(“p”).empty();  -->  <p></p>
复选框：
取得值  
    $("input[type=‘checkbox‘]").prop("checked");
设定值
   $("input[type=‘checkbox‘]").prop("checked",true/false);
Jquery 使用ajax最完整写法
   $.ajax({
       type:”get/post”,
       url:”请求地址”,
       data:{“userName”: “wy” ,  “password”:”111”}  //post用的
       async:true/false,      是否异步
       cache:true/false,      是否缓存页面,false url?r=Math.random()
       dataType:”text/html/script/xml/json/jsonp”,  返回类型
       success:function( 变量名 ){
              解析
       },error:function(e){
            //出错操作
       }
   });

Jquery 使用ajax简洁写法，方便更多人用，精简
  $.get(url ,{参数名:值 ,参数名:值 },function(变量名){
          解析
 });

  $.post(url ,{参数名:值 ,参数名:值 },function(变量名){
          解析
 });
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)区别：
JSON是一种数据交换格式，
JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议