JavaScript知识点5

$(function () {
  //alert("安装成功");//查看jquery是否安装成功

  var val = $("#div1").val();//没有value属性所以是空字符串
  $("#textarea").append(val);//追加字符串
  $("#textarea").append("*********************");
  val = $("#div1").text();//只取出文本内容，不会包含html标签
  $("#textarea").append(val);
  $("#textarea").append("*********************");
  val = $("#div1").html();
  //$("#textarea").append(val);



});

$("#btnTest1").click(function () {
  var val = $("#div1 .content1").text();//取子元素
  alert(val);
  val = $("#div1 .content2").text();
  alert(val);
});

$("#btnTest2").click(function () {
  var val = $(".content1,.content2").text();//取俩个元素
  alert(val);
});

$("#btnTest3").click(function () {
  var val = $("[name='content3']").text();//属性选择器
  alert(val);
});
$("#btnTest4").click(function () {

  var obj = $("[type='radio']:checked");//获取radio的选中值
  if (obj && obj.length > 0) {
    var temp = obj[0];
    alert(temp.id + "-----" + temp.value);
  }


});

$("#btnTest5").click(function () {
  var obj = $("[type='checkbox']:checked");
  if (obj && obj.length > 0) {
    var val = "";
    for (var i = 0; i < obj.length; i++) {
      var temp = obj[i];
      val += temp.value + ",";
    }
    val = val.substr(0, val.length - 1);
    alert(val);
  }
});

$("#btnTest6").click(function () {
  var obj = $(".content1").parent();//返回是个数组,但是只有一个,也就是只返回父元素
  if (obj && obj.length > 0) {
    var temp = obj[0];
    alert(temp.id);
  }

  obj = $(".content1Child").parent();
  if (obj && obj.length == 1) {
    var temp = obj[0];
    alert(temp.id);
  }

  obj = $(".content1Child").parents();//返回所有父级元素
  alert(obj.length);

});

$("#btnTest7").click(function () {
  var obj = $(".content1").siblings();//返回所有的同胞元素
  alert(obj.length);
})

$("#btnTest8").click(function () {
  var obj = $(".content1").next();//返回下一个元素，但是以数组的形式
  alert(obj.length);
});

$("#btnTest9").click(function () {
  var obj = $(".content2").nextAll();//返回和这个元素平级的，所有下一个元素
  alert(obj.length);
})

$("#btnTest10").click(function () {
  var obj = $(".content1").nextUntil("[name='content3");//返回class='content1'和name='content3'俩元素之间的元素
  alert(obj.length);
});

$("#btnTest11").click(function () {
  var obj = $(".content2").prev();
  alert(obj.length);
})

$("#btnTest12").click(function () {
  var obj = $("[name='content3']").prevAll();
  alert(obj.length);
})

$("#btnTest13").click(function () {
  var obj = $("[name='content3']").prevUntil(".content1");
  alert(obj.length);
})

$("#btnTest14").click(function () {
  var val = $("#div1").find(".content1Child").text();//find能直接找到子孙元素
  alert(val);
})

$("#btnTest15").click(function () {
  //alert(jQuery.fn.jquery);
  alert(jQuery.fn.jquery);
})

$("#btnTest16").click(function () {
  alert($(this).text() + "---" + $(this)[0].innerText);
})

$("#btnTest17").click(function () {
  var val = $("#div1 .content1Child").text();//这种写法可以的
  alert(val);
  val = $("[name='div1'] .content1Child").text();//这种写法也是可以ide
  alert(val);
  val = $("div .content1Child").text();//这种写法也是可以的
  alert(val);
  val = $("p.info").text();//俩个选择条件，p标签和class=info
  alert(val);
})

$("#btnTest18").click(function () {
  var val = $("p:first").text();
  alert(val);
  //val=$("p:second").text();没有这种写法
  //alert(val);
});

$("#btnTest19").click(function () {
  var val = $("ul li:first").text();//只找到第一个ul的li的第一个text
  alert(val);
});

$("#btnTest20").click(function () {
  var obj = $("ul li:first-child");
  alert(obj.text());//返回所有ul的第一个li的text
  if (obj && obj.length > 0) {
    var val = "";
    for (var i = 0; i < obj.length; i++) {
      var temp = obj[i];
      val += temp.innerText + ",";
    }
    alert(val);
  }
});

$("#btnTest21").click(function () {
  $("tr:even").find("td").css("color", "red");//字体颜色color
  $("tr:odd").find("td").css("color", "green");
  $("tr:even").css("font-size", "30px");
  $("tr:odd").css("font-size", "25px");

})

$("#btnTest22").click(function () {
  var val0 = $("p:eq(0)").text();
  var val1 = $("P:eq(1)").text();
  var val2 = $("P:eq(2)").text();
  $("p:eq(3)").css("background-color", "red");
  alert(val0 + "****" + val1 + "****" + val2);

})

$("#btnTest23").click(function () {
  var obj = new Object();
  obj.width = "100px";
  obj.height = "100px";
  //obj.left="200px";//不管用,加了ui插件还是不管用
  obj.backgroundColor = "green";//不管用,加了ui插件ok
  obj.marginLeft = "200px";//ok,加了ui一样ok

  var str = JSON.stringify(obj);

  $(".animation").animate(
    obj, 5000);
})

$("#btnTest24").click(function () {
  $(".animation").stop();
})

$("#btnTest25").click(function () {
  var obj = {
    width: "500px",
    height: "500px",
    border: "solid  1px green",
    backgroundColor: "yellow",
    marginLeft: "0px"
  }
  $(".animation").animate(obj, 5000)
})

$("#btnTest26").click(function () {
  $(".animation").toggle(5000);
})

$("#btnTest27").click(function () {
  $(".animation").slideToggle(5000);
})

$("#btnTest28").click(function () {
  $(".animation").toggleClass("animationNew", 5000)
})

$("#btnTest29").click(function () {
  $(".animation").fadeToggle(5000);
})

$("#btnTest30").click(function () {
  $("p:eq(0)").hide(2000, function () {
    alert($(this).text())
  })
})

$("#btnTest31").click(function () {
  $(".animation").css("background-color", "red").hide(5000);

})

$("#btnTest32").click(function () {
  $("#divData").data("gretting", "hello");
  var data = $("#divData").data("gretting");
  alert(data);
  $("#divData").attr("addr", "NJ");
})

$("#btnTest33").click(function () {
  $("li").each(function () {
    alert($(this).text());
  })
})

$("#btnTest34").on("click", function () {
  var obj = $("p").get(0);
  alert(obj.innerText);
});

$("#btnTest35").on("click", function () {
  var jq = $.noConflict();
  var obj = jq("p").get(1);
  alert(obj.innerText);
})

$("#btnTest36").on("click", function () {
  var obj = new Object();
  obj.one = "1";
  obj.two = "2";
  obj.third = "3";
  var val = $.param(obj, false);
  alert(val);
  al = $.param(obj);
  alert(val);
});

$("#btnTest37").on("click", function () {
  var li = $("ul li");
  var list = $("ul li").toArray();
})

$("#btnTest38").on("click", function () {
  jQuery.fx.off = false;
  let val = jQuery.support.ajax;
  alert(val)
  let interval = jQuery.fx.interval;
  jQuery.fx.interval = 100000000000;
  alert(interval);
})

$("#btnTest39").on("click", function () {
  var obj = new Object();
  obj.one = "1";
  obj.two = "2";
  obj.three = "3";
  $.each(obj, function (i, item) {
    alert(i + ":" + item);
  });


  var array = new Array();
  array.push("a");
  array.push("b");
  array.push("c");
  $.each(array, function (i, item) {
    alert(i + "&&&&" + item);
  })



  $.ajax({
    url: "/demo.txt",
    data: "",
    type: "GET",
    dataType: "text",
    async: true,
    success: function (data) {
      $("#textarea").val(data)
    },
    complete: function () {
      alert("complete");
    },
    error: function () {

    }
  });

})

$("#btnTest40").on("click", function () {
  var obj = new Object();
  obj.one = "1";
  obj.two = "2";

  var obj2 = new Object();
  obj2["one"] = "1";
  obj2["two"] = "2";

  var obj3 = {
    one: "1",
    two: "2"
  }

  console.log(obj);
  console.log(obj2);
  console.log(obj3);
  /****以上三个效果一样****/

  var obj4 = {
    "one": "1",
    "two": "2"
  }
  console.log(obj4);

  let str = JSON.stringify(obj);
  let obj5 = JSON.parse(str);
  console.log(obj5);

  /*****以上五个效果一样 */
  str = JSON.stringify(obj);//这是json字符串
  console.log(str);



})

$("#btnTest41").on("click", function () {
  //默认mvc项目不支持跨域访问
  var obj = new Object();
  obj.name = "abc";
  obj.age = "1";//只要可以转为数值型，传字符串ok
  $.ajax({
    url: "http://localhost:1004/Home/GetData",
    data: obj,
    type:"get",
    dataType:"text",
    async:true,
    crossDatain:true,
    success: function (result,status,xhr) {
     alert(result);
    },
    error: function (xhr,status,error) {
      alert("erro")
    },
    complete: function () {
      //alert("complete");
    }

  })
})


$("#btnTest42").on("click",function(){
  var obj=new Object();
  obj.id="13333";
  obj.name="name"
  $.ajax({
    url:"http://localhost:1004/Home/GetDataByJSON",
    //data:obj,//后台能识别
    data:JSON.stringify(obj),
    contentType:"application/json",//要和json连用
    type:"POST",
    success:function(result){
      alert(result);
    },
    error:function(){
      alert("error");
    }
  })
});

$("#btnTest43").on("click",function(){
  /*请求页面里的方法
  let obj=new Object();
  obj.name="dfdfds";
  $.ajax({
    type: "POST",
    url: "http://localhost:1005/YourPage.aspx/GetGreeting",
    data:obj,
    data: JSON.stringify({ name: "aaa" }),
    contentType: "application/json; charset=utf-8",
    dataType: "text",
    success: function(response) {
        alert(response);
    },
    error: function(xhr, status, error) {
        alert("Error: " + error);
    }
});*/

    //调用aspx页面里的某个方法
    var obj=new Object();
    obj.name="name";
    obj.age="23";
    obj.city="addr";
    var param=new Object();
    param["jsons"]=JSON.stringify(obj);

    $.ajax({
      url:"http://localhost:1005/WebForm1.aspx",
      type:"POST",
      data:JSON.stringify(param),
      dataType:"text",
      contentType:"application/json",
      success:function(result){
        alert(result);
      },
      error:function(a,b,c){
        alert("error");
      },
      complete:function(){
        alert("complete");
      }
    })
});

$("#btnTest44").on("click",function(){
  /**请求ashx文件 */
  var obj=new Object();
  obj.id="13333";
  obj.name="name"

  $.ajax({
    url:"http://localhost:1005/Handler1.ashx",
    type:"POST",
    data:JSON.stringify(obj),
    contentType:"application/json",
    success:function(result){
        alert(result);
    },
    error:function(){
      alert("error");
    },
    complete:function(){
      alert("complete");
    }
  })
});


$("ul li").on("click", function () {
  alert($(this).index());
})



$(":checkbox").click(function () {
  alert("this is checkbox");
})

1.radio的选中值，jquery怎么取

$("[type='radio']:checked");

2.checkbox的选中值，juqery怎么取

$("[type='checkbox']:checked");

3.选中元素的父类

$("#id").parent();$("#id").parents();

4.选择器的种类

a.id选择器，属性选择器，类选择器

5.未来元素的方法定义

//当然也可以用于当前已存在的元素

$("#div1").delegate("p”,"click",function(){

        alert('a');

});

//以上的事件要起作用，p要在#div1里面，否则不起作用，3.0及以上版本可以这样些

$("#div1").on("p","click",function(){

        alert('a');

});

6.用on绑定一个元素的事件

$("#btnTest").on("click“,function(){

        $(this).attr("id");//合法

        this.id;//同样合法

});

7.定义一个元素一模一样的事件，会发生什么

俩个事件里的逻辑会合并

8.event.delegateTarget,event.currentTarget的使用

$("div").on("click","span",function(event){

        alert(event.delegateTarget.nodeName);//div

        alert(event.currentTarget.nodeName);//span

});

9.常用的父级，子级，兄弟级的元素的遍历

$(this).parent();//直接父类
$(this).parents();//所有父类
$(this).parentsuntil();//父类筛选，不包括until那个点
$(this).children();//子类
        
$(this).next();//本身元素之后的第一元素
$(this).nextAll();//本身元素之后的所有元素
$(this).nextUntil();//本身元素之后元素筛选 ,不包括until那个点
$(this).prev();//本身元素之前的第一个元素
$(this).prevAll();//本身元素之前的所有元素
$(this).prevuntil();//本身元素之前的元素筛选，不包括until那个点
$(this).siblings();//所有兄弟元素

10.checkbox的选中值和未选中值

$("[type='checkbox']:checked")

$("[type='checkbox']:not(:checked)")