zoukankan      html  css  js  c++  java
  • 项目中需注意的一些问题

    1、AJAX的基本格式:

      $.ajax({

        url : 'url ',   ##url为空即表明默认会向当前页面路径发送请求

        type : 'post',

             data : {'name' : 'jane'} ,

        crossDomain: false,      ###兼容IE浏览器

        success : function(data){

        } ,

        dataType : 'json',

          }); 

    2、AJAX的跨域请求:

    1 $.ajax({
     2     type:"get",    //请求方式
     3     async:true,    //是否异步
     4     url:"http://www.domain.net/url",
     5     dataType:"jsonp",    //跨域json请求一定是jsonp
     6     jsonp: "callbackparam",    //跨域请求的参数名,默认是callback
     7         //jsonpCallback:"successCallback",    //自定义跨域参数值,回调函数名也是一样,
    //默认为jQuery自动生成的字符串 8 data:{"query":"civilnews"}, //请求参数 9 10 beforeSend: function() { 11 //请求前的处理 12 }, 13 14 success: function(data) { 15 //请求成功处理,和本地回调完全一样 16 }, 17 18 complete: function() { 19 //请求完成的处理 20 }, 21 22 error: function() { 23 //请求出错处理 24 } 25 });

         服务端代码:在header(Access-Control-Allow-Origin:*)##允许所有来源的请求访问该资源。

       若想强制跨域请求(如jsonp形式)同一域,将 crossDomain设置为true,即可将服务器重定向到另一个域。 crossDomain:true == !(document.all)  #跨域请求兼容IE浏览器,true表明允许跨域,false表明不允许跨域。在IE9下,http模式下ajax的post请求没有反应,需加上 crossDomain:true == !(document.all) 即可访问成功;若页面是在http模式下,请求却在HTTPS模式下,ajax请求不可以!

    3、将后台返回的值填入input 中:

    1) $("#id").innerHTML = data 
    2) $("#id").val(data) 
    

    4、后台返回数据为字典类型时,若只有一个键值对,即访问形式是:data.key;如果有多个键值对的组合,则访问形式是:data[key].value。

    5、select选中的值与value

      1) $("#id").text();#选中的是select中的文本内容

      2) $("#id").val();#选中的是select属性中value的值

    6、利用jQuery修改一个样式时,例如:$("#id").css("display","none");若修改多个样式时,例如: $("#id").css({"display":"none"},{"background":"white"})。

    7、字符串分割:str.split("");###默认的是以空格分割;substring() 方法用于提取字符串中介于两个指定下标之间的字符。charAt(index) 方法可返回指定位置的字符。获取字符串最后一个字符:str.charAt(str.length- 1)。

    8、对某一值进行判断:

    if (value == "" || value == null || value == "undefined"){
        
    }else{
    
    }

    9、对于表格而言:

    • $("#tbRAF").find("tr").length ;      //获取表的总行数 tr
    • $(this).parent().prevAll().length + 1;   //获取所在行的行号  
    • $(this).prevAll().length + 1;     //获取所在列的列号
    • 设置 td 的内容自动换行:在table标签中的样式中添加:word-wrap:break-word; 若想不按单词进行换行的话,还需要添加 word-break:break-all; 样式。
    $("#table tbody tr  td").click(function(){
        var tdseq = $(this).parent().find("td").index($(this)[0]);   // 列号
        var trseq =  $(this).parent().parent().find("tr").index($(this).parent()[0]);  //行号     
    });
    

    10、区分jQuery中的:html() / val() / text()(标签属性:atrr("属性名"),移除属性:removeAttr())

        html() 方法返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数,则返回被选元素的当前内容。当使用该方法返回一个值时,它会返回第一个匹配元素的内容。该函数的用途相当于设置或获取DOM元素的innerHTML(innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML)属性值。$(selector).html(function(index,oldcontent))   ###接收选择器的 index 位置;接收选择器的当前内容。

        val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值。返回第一个匹配元素的 value 属性的值。 $(selector).val(function(index,oldvalue))#接受选择器的 index 位置;接受选择器当前 Value 属性。

         text() 方法方法设置或返回被选元素的文本内容。当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)。当该方法用于设置值时,它会覆盖被选元素的所有内容 $(selector).text(function(index,oldcontent))##接受选择器的 index 位置;接受选择器的当前内容。

    11、数组清空:

           1)设置数组长度为0,arr.length=0;2)arr.splice(0,arr.length)

    12、JSON 字符串和JSON 对象互转

           1)浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:

    JSON.parse(jsonstr); //可以将json字符串转换成json对象 
    JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
    

      注:ie8(兼容模式),不支持ie7和ie6没有JSON对象,推荐采用JSON官方的方式,引入json.js。 可以在https://github.com/douglascrockford/JSON-js上获取到这个js,一般现在用json2.js。

           2)JQuery 插件支持的转换方式

    $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 
    

      注:这种只需要引入jquery插件即可,支持IE7等,推荐使用,简单方便安全。

    13、JQuery DIV 滚动至浏览器顶部位置固定

     1)   $(function() { 
              var elm = $('.nav');  // 定义元素
              var startPos = $(elm).offset().top;  //元素距离顶部的高度
              $.event.add(window, "scroll", function() { 
                  var p = $(window).scrollTop();  //滚动条高度
                  //根据判断来调整元素的样式
                  $(elm).css('position',((p) > startPos) ? 'fixed' : 'static'); 
                  $(elm).css('top',((p) > startPos) ? '0px' : ''); 
              }); 
            });
    2) $(function(){
          //获取要定位元素距离浏览器顶部的距离
          var navH = $(".nav").offset().top;
          //滚动条事件
          $(window).scroll(function(){
            //获取滚动条的滑动距离
            var scroH = $(this).scrollTop();
            //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
            if(scroH>=navH){
              $(".nav").css({"position":"fixed","top":0});
            }else if(scroH<navH){
              $(".nav").css({"position":"static"});
            };
          });
         });

    14、JQuery 父级以及同级元素查找

    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")

    15、对动态添加的元素进行点击事件

    在项目中使用JQueryd进行动态添加元素,并在元素上绑定事件,例如直接使用:$("#id").click(function(){})是不起作用的,需使用JQuery事件中的delegate()方法才可以。delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。其语法:

    $(selector).delegate(childSelector,event,data,function)

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

    $("div").delegate("button","click",function(){
      $("p").slideToggle();
    });
    childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
    event

    必需。规定附加到元素的一个或多个事件。

    由空格分隔多个事件值。必须是有效的事件。

    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。

    16、获取表单FROM所有的元素可以采用var a = $('#form_id').serializeArray() 进行获取,获取的数据以对象结构返回,可以使用用 $.each 进行分解;注意:$.serializeArray() 会过滤掉被禁用的元素

    //获取form表单中所有可见的input与select
    $("#form input:visible,select:visible").serializeArray()
    
  • 相关阅读:
    泰山之行
    泰山之行
    Java EE (2) -- Java EE 6 Enterprise JavaBeans Developer Certified Expert(1z0-895)
    一、浏览器生成消息(2)
    P1194 买礼物 洛谷
    P1195 口袋的天空 洛谷
    P1546||2627 最短网络 Agri-Net 洛谷||codevs
    P3366 最小生成树【模板】 洛谷
    T2627 村村通 codevs
    【目录】我的原创技术视频教程
  • 原文地址:https://www.cnblogs.com/christal-11/p/7731616.html
Copyright © 2011-2022 走看看