青岛北京网站建设公司,WordPress无法加载插件js,wordpress查看,网站域名空间代理（一）jQuery概述 jQuery本身是js的一个轻量级的库，封装了一个对象jQuery，jquery的所有语法都在jQuery对象中 浏览器不认识jquery，只渲染html、css和js代码，需要先导入jQuery文件，官网下载即可 jQuery中文说明文档：https://hemin.cn/jq/ （二）jQuery要点 1、jQuery对象 …（一）jQuery概述 jQuery本身是js的一个轻量级的库，封装了一个对象jQuery，jquery的所有语法都在jQuery对象中 浏览器不认识jquery，只渲染html、css和js代码，需要先导入jQuery文件，官网下载即可 jQuery中文说明文档：https://hemin.cn/jq/ （二）jQuery要点 1、jQuery对象 通过jQuery包装DOM对象后产生的对象。jQuery对象用$符号表示给jQuery对象命名引用时，通常标识符前面加个$符，与DOM对象的引用区分开来jQuery代码和js代码可以混着用，比如绑定事件处理函数仍旧可以用js的几种方式，只是js对象调用DOM方法和属性，jQuery对象也调用自己的方法DOM对象和jQuery对象可以互相转换： 用$符号把DOM对象括起来就变成了jQuery对象，如：$(this)jQuery加上[0]就变成了DOM对象，如：$("p")[0] 2、jQuery的语法 可以概括为$(selector).action()的形式， 2.1selector 选择器和筛选器： id选择器拿到的是唯一的标签对象；其他选择器得到的是标签对象数组；jquery会自动循环处理每个元素，不用自己再写循环语句一个个处理 （1）基本选择器 基本格式：$("css-selector") （1.1）通用选择器
$("*").css("color", "green")
（1.2）id选择器
$("#jquery").css("color", "red")
（1.3）class选择器
$(".hl").css("color", "gold")
（1.5）标签选择器
$("div").css("color", "black")
（1.6）并列多选选择器
$(".hl,div").css("color", "gold")
（2）层级选择器
（2.1）后代选择器
$(".hl div").css("color", "red")
（2.2）子代选择器
$(".hldiv").css("color", "red")
（2.3）毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")
（2.4）下方兄弟选择器（不用紧挨着）
$(".hl~p").css("color", "red")
（3）属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")
（4）表单选择器（只有inpput的type属性才行）
$(":text").css("color", "blue")
（5）基本筛选器
（5.1）first：第一个
$(".hl~p:first").css("color", "gold")
（5.2）last：最后一个
$(".hl~p:last").css("color", "gold")
（5.3）eq(index)：指定索引序号
$(".hl~p:eq(0)").css("color", "gold")
（5.4）even：奇数行
$(".hl~p:even").css("color", "gold")
（5.5）odd：偶数行
$(".hl~p:odd").css("color", "gold")
（5.6）gt(index)：大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")
（5.7）lt(index)：小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")
（6）过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性，返回boolean值
（7）查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签（不包含）的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签（不包含）的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数，类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")
（8）练习-左侧菜单
bodydiv style="clear: both"练习-左侧菜单：brdiv class="outer2"div class="menu"div class="item"div class="title" onclick="f1(this)"菜单一/divdiv class="con"div111/divdiv111/divdiv111/div/div/divdiv class="item"div class="title" onclick="f1(this)"菜单二/divdiv class="con hide"div222/divdiv222/divdiv222/div/div/divdiv class="item"div class="title" onclick="f1(this)"菜单三/divdiv class="con hide"div333/divdiv333/divdiv333/div/div/div/divdiv class="content"/div/div/div
/bodyfunction f1(self) {$(self).next().removeClass("hide");$(self).parent().siblings().children(".con").addClass("hide");
} 2.2 action() jQuery操作属性的方法 （1）标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class"))
//设置属性值，不适用设置input标签的checked属性，因为不默认选中（手动勾选）是undefined，默认选中是cheched
$(".attr1 .a1").attr("class", "a2")
// 删除属性
$(".attr1 .a1").removeAttr("class")
//获取固有属性值，不适用自定义属性，因为prop找不到，获取到的是undefined，但适用input标签的checked属性，因为其值是true或false
console.log($(".attr1 .a2").prop("class"))
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class")
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此，需要使用prop方法去操作才能获得正确的结果。
（2）css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
（3）HTML代码/文本/值
$(".attr1 .a3").html("456h1123/h1") //相当于js的innerHTML，加参数是替换原本内容
$(".attr1 .a3").text("p111/p") //相当于js的innerText，加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value，不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值
（4）jQuery的循环语句 方式一： $.each(object[循环的对象，如数组], function(index[, value]){ 代码块 }) 方式二： $("p").each(function(){ 代码块；//每一个标签对象是$(this) }) //1.方式一：
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){console.log("key:", key); //循环object（字典）第一个参数值是：键keyconsole.log("value:", value);
})
$.each(data, function(key){console.log("key:", key); //循环object（字典）如果只有一个参数值是：键key
})
$.each(dl,function(index,value){console.log("index:", index); //循环数组第一个参数值是：索引indexconsole.log("value:", value);
})
$.each(dl,function(index){console.log("index:", index); //循环数组如果只有一个参数值是：索引index
})
//2.方式二：
$("li").each(function(){console.log("$(this):", $(this));console.log("$(this).html():", $(this).html());
})
（5）练习-正反选
!DOCTYPE html
html lang="en"
headmeta charset="UTF-8"titleTitle/titlescript src="jquery-1.11.3.min.js"/scriptscriptfunction selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}/*js写法function reverse(){let idlist=$("table :checkbox")for(let i=0;iidlist.length;i++){let element=idlist[i];let ischecked=$(element).prop("checked")if (ischecked){$(element).prop("checked",false)}else {$(element).prop("checked",true)}}} *//*jQuery循环方式*/function reverse(){$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});}/script
/head
bodybutton onclick="selectall();"全选/buttonbutton onclick="cancel();"取消/buttonbutton onclick="reverse();"反选/buttontable border="1"trtdinput type="checkbox"/tdtd111/td/trtrtdinput type="checkbox"/tdtd222/td/trtrtdinput type="checkbox"/tdtd333/td/trtrtdinput type="checkbox"/tdtd444/td/tr/table
/body
/html
（6）jQuery支持链式查找 对一个标签对象做完操作后，可以用.继续查找其他标签对象进行操作 $("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行：
$("p").parent().addClass("hide").prev().addClass("hide")
（7）练习-模态对话框
function show(self){$(self).parent().next().removeClass("hide");
}
function cancel(self){$(self).parent().parent().addClass("hide");
}
（8）文档处理 div class="c1"文档操作pppp/pbutton class="bo"add/buttondiv class="lxclone"练习-复制输入框div class="item"button class="bc"+/buttoninput type="text"/div/div/div$(".bo").on("click", function(){//1.内部插入：父标签内插入子标签// $(".c1").append("h1123/h1"); // 创建新标签方式一：直接在append（）里面写上标签内容var $ele = $("h1/h1"); //创建新标签方式二：相当于js中var ele=document.cerateElement("h1");var $ele = $("h1"); //简化写法$ele.html("hello word");$ele.css("color", "red");$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面//2.外部插入：插入兄弟标签$(".c1").after($ele);$(".c1").before($ele);$ele.insertAfter($(".c1"));$ele.insertBefore($(".c1"));//3.替换$(".c1 p").replaceWith($ele);//4.删除与清空$(".c1").empty(); //清空标签的内容，但是标签还在$(".c1").remove(); //删除标签//5.复制var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件$(".c1").after($ele2);
})
（9）练习-复制输入框 div class="c1"文档操作pppp/pbutton class="bo"add/buttondiv class="lxclone"练习-复制输入框div class="item"button class="bc"+/buttoninput type="text"/div/div/div$(".bc").click(function (){var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增，因为复制出来的也是一个class属性，也会被复制var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制，每次就是复制一个$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");$(".lxclone").append($cloneObj);
});
function removeObj(self){$(self).parent().remove();
}
3、css操作
div class="cssop"CSS操作p id="ys"1.样式/pdiv id="offsetdiv"2.位置div class="div1"2.1-offset相对视口偏移量/divdiv class="div2"2.2-position相对已定位父级偏移量/div/divdiv class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px"返回顶部/divulli111/lili222/lili333/li/ul
/div
3.1 样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
3.2 位置
//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象，有top和left两个属性：是相对于视口（窗口）的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象，有top和left两个属性：是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){if($(window).scrollTop()100){ //窗口滚动滑轮距离顶部的距离$(".gotop").removeClass("hide")} else {$(".gotop").addClass("hide")}
}
$(".gotop").click(function(){$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("button");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("button class='aftb hide'回顶部/button");
$("#offsetdiv .div2").html("h1111/h1h1111/h1h1111/h1h1111/h1h1111/h1h1111/h1")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){if($(this).scrollTop()0){ //窗口滚动滑轮距离顶部的距离$(".aftb").removeClass("hide")} else {$(".aftb").addClass("hide")}
});
$(".aftb").click(function(){$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,（左右滑轮，类似上下滑轮）
3.3 尺寸
console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度
3.4 索引
$("ul li").index(); //获取标签集合的索引
