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