基础 jquery
jQuery 杂项方法 | 菜鸟教程 (runoob.com)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../js/jquery.js"></script> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { text-decoration: none; } .clear::before, .clear::after { content: ""; display: table; clear: both; } .menu li { float: left; margin-right: 20px; } .active { background-color: aqua; } </style> </head> <body> <nav class="menu"> <ul class="clear"> <li><a href="#">搜狐</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">搜狐</a></li> </ul> </nav> <div class="nav"> <a href="#" id="index1" index="1">baidu</a> <a href="#">baidu</a> <a href="#">baidu</a> <a href="#">baidu</a> <a href="#">baidu</a> <input type="text" name="name" id="name" value="你好" /> </div> <div class="div"> <input type="text" name="" id="" /> <label for="">学生</label> </div> <div class="checkdiv"> <label for="">全选</label ><input type="checkbox" name="all" id="all" /><label for="">反选</label ><input type="checkbox" name="noall" id="noall" /> <div class="checksdiv"> <input type="checkbox" name="data1" id="data1" /> <input type="checkbox" name="data2" id="data2" /> <input type="checkbox" name="data3" id="data3" /> </div> </div> <script> //$ 是jQuery的别称（另外的名字） // jQuery(function(){ // jQuery("#id").val() // }) // $(function(){}) //文档元素加载完执行 $(document).ready(function () { //获取dom对象 //var id= document.querySelector("#id") //dom对象转换jquery对象 //$(id) //jquery对象转换dom对象 // $(id).get(0) // $(id)[0] //display=block //$("#id").show() //display=none //$("#id").hide() //是否有某个类名 //$("#id").hasClass("active") // let val = $("#name").val(); // console.log(val); // let htmlStr = $(".div").html(); // console.log(htmlStr); // let text = $("div label").text(); // console.log(text); // var a = $("#index1 +a"); // console.log(a.length) // var as = $("#index1 ~a"); // console.log(as.length) // var ass = $(".nav a:first").siblings("a"); // var ass = $(".nav a:eq(0)").siblings("a"); // console.log(ass.length); // let a = $("#index1").next("a"); // console.log(a.length); // let as = $("#index1").nextAll("a"); // console.log(as.length); // 后代选择器 包括儿子和算子 // let alist = $(".nav").find('a:odd'); // console.log(alist) // var parent = $("#index1").parent(); // console.log(parent) // 父亲的集合 // $("#index1").parents(); // 子选择器 儿子 // var children = parent.children() // console.log(children) // var a = parent.children("a:odd")//.children("a:even")//children("a:eq(0)") // console.log(a) //切换类 toggle切换 // $("#index1").click(function(){ // $(this).toggleClass("active") // }) // let a1 = $(".nav a").eq(1); // console.log(a1); // $("#index1").css({width:200,height:200}) // $("#index1").css("backgroundColor","blue") // $("#index1").addClass("active") // $("#index1").removeClass("active") // //prop 固有属性 // let aId = $("#index1").prop("id"); // console.log(aId); // //自定义属性 // let aindex = $("#index1").attr("index"); // console.log(aindex); // //width width() / height() 获取设置元素 width和height大小 // let width = $("#index1").width(); // //innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小 // let innerWidth = $("#index1").innerWidth(); // //outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小 // let outerHeight = $("#index1").outerHeight(); //outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin // let outerHeight = $("#index1").outerHeight(true); //元素位置 position:relative // let top = $("#index1").offset().top; // let left = $("#index1").offset().left; //设置 // $("#index1").offset({ top: 200, left: 200 }); //position只能获取 不能设置 let position = $("#index1").position(); //全选 // $("#all").click(function () { // $("#noall").prop("checked", false); // let checked = $(this).prop("checked"); // $(".checksdiv input[type=checkbox]").prop("checked", checked); // }); //反选 // $("#noall").click(function () { // $("#all").prop("checked", false); // let checked = $(this).prop("checked"); // each 第一个参数是index 第二是循环元素 // $(".checksdiv input[type=checkbox]").each(function (index, val) { // $(val).prop("checked", !$(val).prop("checked")); // if(!checked){ // $(val).prop("checked", false); // } // }); // }); $(".menu ul").hover(function () { //上卷 参数毫秒数 // $(this).slideUp(2000); //下拉 参数毫秒数 // $(this).slideDown(2000); //上卷 下拉 切换 // $(this).slideToggle(2000) // $(this).stop().slideToggle(3000) //淡入 // $(this).fadeIn(2000) //淡出 //$(this).fadeOut(2000) //淡入淡出切换 // $(this).fadeToggle(3000) //动画 // $(this) // .find("li") // .animate({ top: 200, left: 200, opacity: 0.4, width: 100 }, 3000); }); //值变化 // $(".div input[type=text]").change(function () { // console.log($(this).val()); // }); //创建元素 // let li = $("<li><a href='#'>百度</a></li>"); //添加元素 // $(".menu").find("ul").append(li) //li.appendTo($(".menu").find("ul")) // li.insertBefore($(".menu ul").find("li:last")) //删除元素 //删除 ul 后的li // $(".menu ul li:first").remove(); //匹配子元素 // $(".menu ul li:first").empty() // $(".menu").find("ul").insertBefore(li) //数据缓存 data() 这个里面的数据是存放在元素的内存里面 // $(".menu").data("user","xxx") // console.log($(".menu").data("user")) // //事件处理 绑定多个事件 // $("#index1").on({ // click: function () {}, // mouseover:function(){} // }); // //绑定 多个 click mouseover // $("#index1").on("click mouseover",function(){ // $(this).toggleClass("active") // }) // //指派 绑定 li click事件 // $(".menu ul").on("click","li",function(){ // }) //$(".menu ul").on("click",function(){}) // //事件解绑 // $(".menu ul").off("click") // //解除 li的事件 // $(".menu ul").off("click","li") //只执行一次 // $(".menu ul").one("click",function(){}) //自动触发事件 会触发元素的默认行为 // $(".menu ul").click() //会触发元素的默认行为 // $(".menu ul").trigger("focus"); //不会触发元素的默认行为 // $(".menu ul").triggerHandler("focus") //事件对象 event 阻止默认行为 stopPropagation // $(".menu ul").click(function(event){ // event.stopPropagation() // }) // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用. // 深拷贝拷贝多层, 每一级别的数据都会拷贝. // var obj2 = { // id: 1, // name: "andy", // msg: { // age: 18, // }, // }; // var o2 = {}; // //浅拷贝 // $.extend(o2,obj2) // //深拷贝 // $.extend(true,o2,obj2) // console.log(o2) // $(".menu li").first() // $(".menu li").last() // $("#div").not(".url") //获取过滤 class .url // $(".menu li").filter(".url") var obj1 = { name: "runoob", alexa: 10000, site: "www.runoob.com" }; let jsonStr = JSON.stringify(obj1); console.log(jsonStr); let obj2 = JSON.parse(jsonStr); console.log(obj2) //JSONP 跨域 // $.getJSON( // "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", // function (data) { // var html = "<ul>"; // for (var i = 0; i < data.length; i++) { // html += "<li>" + data[i] + "</li>"; // } // html += "</ul>"; // $("#divCustomers").html(html); // } // ); //post //$.post("url", { name: "www", age: 12 }, function (data, status) {}); //get // $.get("url", function (data) {}); }); </script> </body> </html>
浙公网安备 33010602011771号