笔记之_Java整理jquery

Posted 2020-10-15 莫轩ASL

$.extend扩展
Jquery的bin绑定事件，unbind取消所有事件
http://jquery.cuishifeng.cn/
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;
复选框：
取得值  
    $("input[type=‘checkbox‘]").prop("checked");
设定值
   $("input[type=‘checkbox‘]").prop("checked",true/false);
循环选中复选框：
$(".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>
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是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
































Jquery选择器：
基本选择器
$(‘*’)     匹配页面所有元素
$(‘#id’)     id选择器
$(‘.class’)     类选择器
$(‘element’)     标签选择器
组合/层次选择器     
$(‘E,F’)     多元素选择器，用”,分隔，同时匹配元素E或元素F
$(‘E F’)     后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F)     子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$(‘E+F’)     直接相邻选择器，匹配E元素之后的相邻的同级元素F
$(‘E~F’)     普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$(‘.class1.class2’)     匹配类名中既包含class1又包含class2的元素
基本过滤选择器     
$("E:first")     所有E中的第一个
$("E:last")     所有E中的最后一个
$("E:not(selector)")     按照selector过滤E
$("E:even")     所有E中index是偶数
$("E:odd")     所有E中index是奇数
$("E:eq(n)")     所有E中index为n的元素
$("E:gt(n)")     所有E中index大于n的元素
$("E:ll(n)")     所有E中index小于n的元素
$(":header")     选择h1~h7 元素
$("div:animated")         选择正在执行动画效果的元素
内容过滤器     
$(‘E:contains(value)’)     内容中包含value值的元素
$(‘E:empty’)         内容为空的元素
$(‘E:has(F)’)     子元素中有F的元素，$(‘div:has(a)’):包含a标签的div
$(‘E: parent’)     父元素是E的元素，$(‘td: parent’):父元素是td的元素
可视化选择器     
$(‘E:hidden’)     所有被隐藏的E
$(‘E:visible’)     所有可见的E
属性过滤选择器     
$(‘E[attr]’)         含有属性attr的E
$(‘E[attr=value]’)     属性attr=value的E
$(‘E[attr !=value]’)     属性attr！=value的E
$(‘E[attr ^=value]’)     属性attr以value开头的E
$(‘E[attr $=value]’)     属性attr以value结尾的E
$(‘E[attr =value]’)     属性attr包含value的E
$(‘E[attr][attr =value]’)     可以连用
子元素过滤器     
$(‘E:nth-child(n)’)         E的第n个子节点
$(‘E:nth-child(3n+1)’)     E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)’)     E的index为偶数的子节点
$(‘E:nth-child(odd)’)     E的index为奇数的子节点
$(‘E:first-clild’)             所有E的第一个子节点
$(‘E:last-clild’)             所有E的最后一个子节点
$(‘E:only-clild’)         只有唯一子节点的E的子节点
表单元素选择器     
$(‘E:type’)             特定类型的input
$(‘:checked’)             被选中的checkbox或radio
$(‘option: selected’)     被选中的option