🌟JQuery 是一个JavaScript库，极大地简化了JavaScript编程。JQuery一定要引入文件才能使用，本章内容从JQuery的选择器，属性，文档处理，效果展示，事件处理五部分展开介绍。
🌟Jquery 的三种入口
1.简洁入口
$(function(){
$("h1").css("color","green");
//获取id属性值为bid的按钮并绑定点击事件。
$("#bid").click(function(){
alert("ok");
});
});
2.标准入口
$(document).ready(function(){
//获取h1标签，并设置css样式
$("h1").css("color","blue");
});
3.当前页面加载后完成
window.onload = function(){
//使用jquery编写js程序
//获取h1标签，并设置css样式
$("h1").css("color","red");
//获取id属性值为bid的按钮并绑定点击事件。
$("#bid").click(function(){
alert("ok");
});
}
🌟JQuery的基本选择器 $
$ 类似于对象调用方法，万能
✨获取id值为hid的元素节点
document.getElementById("hid");
//等价于上面语句,获取id值为hid元素节点，并设置css样式
$("#hid").css("color","blue");
✨获取网页中所有
- 的元素节点
-
document.getElementsByTagName("li"); //获取网页中所有li元素节点，并设置css样式 $(“li").css("color","red");✨获取class属性值为cc的所有元素节点
//获取class属性值为cc所有元素节点，并设置css样式 $(".cc").css("color","red");✨选择器组
//选择器组，统一设置指定css样式
$(“h1,h2,h3,h4,h5,h6”).css(“background-color”,"#ddd");🌟JQuery 的层级选择器
$(function(){ //获取ul中所有子元素节点li（包括后代节点），并设置样式 $("ul li").css("color","red"); //获取ul中所有直接子元素节点li（不包括后代节点），并设置样式 $("ul>li").css("color","red"); //获取ul同级紧邻后面的第一个兄弟节点li，并设置样式 $("ul+li").css("color","red"); //获取ul后面所有同级兄弟li元素节点，并设置样式 $("ul~li").css("color","red"); });🌟JQuery 属性和CSS
//获取索引位置为2的li节点并设置样式 $("li:eq(2)").css("color","red"); //获取前2个li节点并设置样式 $("li:lt(2)").css("color","red");//获取所有li节点并添加鼠标移入和移出事件 $("li").mouseover(function(){ $(this).animate({paddingLeft:"+=20"},800); }).mouseout(function(){ $(this).animate({paddingLeft:"-=20"},500); });🌟JQuery 内容选择器，筛选内容
$(function(){ $("div:contains('John')").css("color","red"); });🌟JQuery 属性选择器：正则表达式
$(function(){ //获取所有含有value属性的input元素标签，并设置样式 $("input[value]").css("border","1px solid red"); //获取name属性值为phone的input元素标签，并设置样式 $("input[name='phone']").css("border","1px solid red"); //获取name属性值不为phone的input元素标签，并设置样式 $("input[name!='phone']").css("border","1px solid red"); //获取name属性值是以a字符开头的所有input元素标签，并设置样式 $("input[name^='a']").css("border","1px solid red"); //获取name属性值是以e字符结尾的所有input元素标签，并设置样式 $("input[name$='e']").css("border","1px solid red"); //获取name属性值中含有m字符的所有input元素标签，并设置样式 $("input[name*='m']").css("border","1px solid red"); });🌟JQuery 子元素选择器
$(function(){ //获取每组ul中的第一个li节点并添加样式 $("ul li:first-child").css("color","red"); //获取每组ul中的最后一个li节点并添加样式 $("ul li:last-child").css("color","red"); //获取每组ul中的第三个li节点并添加样式 $("ul li:nth-child(3)").css("color","red"); });🌟JQuery 表单选择器
function doFun(){ //获取所有多选框中选择中的元素节点 var list = $("input[type='checkbox']:checked"); var list = $(":checkbox:checked"); alert(list.length); //获取li元素节点（条件是里面的多选框必须选中），并设置样式 $("li:has(input:checked)").css("color","red"); }🌟JQuery 属性操作
function dofun(){ var a = $("#aid"); console.log(a.attr("href")); //获取 console.log(a.prop("href")); //获取 console.log(a.attr("title")); console.log(a.prop("title")); a.attr("href","http://news.baidu.com"); //添加或更改 a.removeAttr("title"); //删除属性 a.attr("aa","bb"); //添加属性 a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性 a.prop("title","百度新闻"); //只支持HTML DOM的属性操作 }✨JQuery class 类属性
<script> $(function(){ //获取上面所有的li节点并添加点击事件 ("ul.uu li").click(function(){ //第一种：切换class类属性 $(this).toggleClass(“active”); //第二种：判断当前节点li是否含有active class属性 if($(this).hasClass(‘active')){ //删除class类属性 $(this).removeClass("active"); }else{ //添加class类属性 $(this).addClass("active"); } }); }); </script>✨JQuery 属性——HTML代码/文本/值的操作
$(function(){ console.log($("li.c1").html()); //类似于js中的innerHTML console.log($("li.c2").text()); $("li.c3").html('<a href="http://www.qq.com">腾讯2</a>'); $("li.c4").text('<a>新浪2</a>'); console.log($("input[name='kw']").val()); $("input[name='kw']").val('CSS样式'); });案例：
$(function(){ //获取按钮并绑定点击事件 $("button").click(function(){ //判断按钮上的文本，指定对应的操作 switch($(this).html()){ case "全选": //获取所有多选框并设置选中 $("ul.uu input:checkbox").prop("checked",true); break; case "全不选": $("ul.uu input:checkbox").prop("checked",false); break; case "反选": $("ul.uu input:checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); break; } }); });✨JQuery 中的CSS样式操作
$(function(){ //获取标题并设置css样式 //$("#hid").css("color","red"); //单个属性设置 $("#hid").css({"color":"green","background-color":"#ddd"}); console.log($("#hid").css("color")); //获取css属性 //获取div层的位置 var offset = $("#inner").offset(); console.log(offset.left,offset.top); //获取偏移位置 var position = $("#inner").position(); console.log(position.left,position.top); //获取尺寸 console.log($("#inner").width(),$("#inner").height()); $("#inner").width(300) });✨JQuery 节点遍历
$(function(){ $("button").click(function(){ //$("li").css("color","red"); //获取li节点并遍历执行操作 $("li").each(function(i){ //alert(i); //索引位置 $(this).html($(this).html()*2); }); }); //统一绑定点击事件 $("li").click(function(){ alert($(this).html()); });🌟JQuery 文档处理之内部创建与添加节点
$(function(){ //获取按钮并绑定点击事件 $("button").click(function(){ //获取输入框中的内容 var tname = $("input[name='tname']").val(); //获取上的内容判断执行对应的操作 switch($(this).html()){ case "前添加": //$(“ul.uu”).prepend(“<li>”+tname+"</li>");可以反过来写，如下面： $("<li>"+tname+"</li>").prependTo("ul.uu"); break; case "后追加": //$("ul.uu").append("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").appendTo("ul.uu"); break; } });✨JQuery 文档处理之外部插入和删除
$(function(){ //获取所有的li节点并绑定点击事件 $("ul.uu li").click(function(){ $("ul.uu li").removeClass("active"); $(this).addClass("active"); }); //获取所有按钮并绑定点击事件 $("button").click(function(){ //获取输入框中的内容 var tname = $("input[name='tname']").val(); //获取按钮上的文本并判断执行对应操作 switch($(this).html()){ case "前添加": //$("li.active").before("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").insertBefore("li.active"); break; case "后追加": //$("li.active").after("<li>"+tname+"</li>"); $("<li>"+tname+"</li>").insertAfter("li.active").click(function(){ $("ul.uu li").removeClass("active"); $(this).addClass("active"); }); break; } }); });✨JQuery 文档处理之外部插入实例
<script> //jquery入口 $(function(){ //获取所有的输入框并绑定获得和失去焦点事件 $("input:text").focus(function(){ //获得焦点事件处理 var title = $(this).attr("title"); $("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd"); }).blur(function(){ //失去焦点事件处理 $(this).next("span").remove(); }); }); </script>✨JQuery 文档处理之删除节点
$(function(){ //获取li节点并添加选中效果 $("ul.uu li").click(function(){ $(this).toggleClass("active"); }); //获取按钮并绑定点击事件 $("button").click(function(){ //根据按钮上的文本执行对象操作 switch($(this).html()){ case "删除": $("li.active").remove(); break; case "清空": $("ul.uu").empty(); break; } }); });🌟JQuery 特效展示——隐藏与显示show();hide();slideUp();fadeIn()
$(function(){ //获取按钮并绑定点击事件 $("button").click(function(){ //判断按钮上的文本并执行对应的操作 switch($(this).html()){ case "显示": //$("img").show("slow"); //$("img").slideDown("slow"); $("img").fadeIn("slow"); break; case "隐藏": //$("img").hide("slow"); //$("img").slideUp("slow"); $("img").fadeOut("slow"); break; case "切换": //$("img").toggle("slow"); //$("img").slideToggle("slow"); //$("img").fadeToggle("slow"); $("img").stop().toggle("slow");//结束之前操作再执行toggle("slow"); break; } }); });✨JQuery 特效展示——短信墙（滚动展示
- 信息
- ）
<script> //jquery入口 $(function(){ //定时每隔3秒后执行一次 setInterval(function(){ //获取ul中的最后一个li节点设置隐藏后添加到ul里面的最前面，并设置滑动显示 $("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow"); //向上滚动展示 /*$("ul.uu li:first").slideUp("slow",function(){ $(this).appendTo("ul.uu").show(); });*/ },3000); }); </script>✨JQuery 特效展示——树形菜单（next()筛选兄弟节点）
<script> $(function(){ //获取上面所有的h4标题并绑定点击事件 $("h4").click(function(){ //获取当前h4紧邻的兄弟ul节点，并滑动展开显示 $(this).next("ul.uu").slideToggle("slow") }); }); </script>✨JQuery 特效展示——选项卡（注意eq()表示第几个，标签和
层数对应）<h1 id="hid">jQuery实例--jQuery效果展示--选项卡</h1> <div id="did"> <div class="header"> <ul> <li class="b1">aaa</li> <li class="b2">bbb</li> <li class="b3">ccc</li> <li>ddddd</li> </ul> </div> <div class="body"> <div class="cc d1">AAA</div> <div class="cc d2">BBB</div> <div class="cc d3">CCC</div> <div class="cc">DDDD</div> </div> </div> <script src="./jquery-3.5.0.min.js"></script> <script> //jquery入口 $(function(){ //获取上面header头中ul里面的所有li节点，并绑定鼠标移入事件 $("#did .header ul li").mouseover(function(){ //获取事件源对象li的索引位置 var m = $(this).index(); //隐藏所有body层 $("#did .body div").hide(); //显示索引位置m对应的div层 $("#did .body div").eq(m).fadeIn("slow"); }); }); </script>✨JQuery 特效展示——导航栏
<body> <h1 id="hid">jQuery实例--jQuery效果展示--导航栏效果</h1> <div id="menu"> <ul> <li><a href="#">商品展示</a> <ul class="item"> <li><a href="#">热卖商品</a></li> <li><a href="#">最新商品</a></li> <li><a href="#">特价商品</a></li> <li><a href="#">推荐商品</a></li> </ul> </li> <li><a href="#">站内新闻</a> <ul class="item"> <li><a href="#">国内新闻</a></li> <li><a href="#">体育信息</a></li> <li><a href="#">热点新闻</a></li> </ul> </li> <li><a href="#">网站公告</a> <ul class="item"> <li><a href="#">国内新闻</a></li> <li><a href="#">体育信息</a></li> <li><a href="#">热点新闻</a></li> <li><a href="#">体育信息</a></li> <li><a href="#">热点新闻</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul class="item"> <li><a href="#">国内新闻</a></li> <li><a href="#">体育信息</a></li> <li><a href="#">热点新闻</a></li> </ul> </li> <li><a href="#">在线帮助</a></li> </ul> </div> <script src="./jquery-3.5.0.min.js"></script> <script> //jquery入口 $(function(){ //获取所有菜单中li选项，并绑定鼠标移入和移出事件 $("#menu ul li").mouseover(function(){ //移入事件处理 //$(this).find("ul.item").show(); $("ul.item:animated").stop().hide();//展示之前停止slow还未滑动完成的动作 $(this).find("ul.item").slideDown("slow");//滑动展示 }).mouseout(function(){ //移出事件处理 $(this).find("ul.item").hide(); }); }); </script>🌟JQuery 事件处理
绑定方式与JS不同，但JS绑定方法也可以用<body> <h1 id="hid">jQuery实例--事件处理</h1> <button onclick="dofun()">点击我</button> <button id="bid">投票</button> <script src="./jquery-3.5.0.min.js"></script> <script> //jquery入口 $(function(){ //获取投票按钮并绑定一次性点击事件 $("#bid").one("click",function(){ alert("投票成功！"); $(this).html("已投票"); }); }); function dofun(){ console.log("事件被点击！"); $("#hid").css("color","red"); //使用jquery程序激发一个事件 $("#bid").trigger("click"); } </script>🌟JQuery 鼠标的移入与移出事件
<script> //jquery入口 $(function(){ //获取did层并绑定鼠标的移入和移出事件 /* $("#did").mouseover(function(){ console.log("鼠标移入。。。。"); }).mouseout(function(){ console.log("鼠标移出。。。。"); }); */ //效果同上的代码 /* $("#did").hover(function(){ //鼠标移入事件处理 console.log("鼠标移入111。。。。"); },function(){ //鼠标移出事件处理 console.log("鼠标移出11。。。。"); }); */ //获取图片列表并绑定鼠标移入事件 $("#list img").mouseover(function(){ $("#mid").attr("src",$(this).attr("src")); }); }); </script>🌟JQuery 事件之图片放大镜
<body> <h1 id="hid">jQuery实例--图片的放大镜效果</h1> <br/><br/> <img id="mid" src="./images/33.jpg" width="384" height="240"/> <div id="did"> <img src="./images/33.jpg"/> </div> <br/><br/> <script src="./jquery-3.5.0.min.js"></script> <script> //jquery入口 $(function(){ //获取mid图片节点并绑定鼠标移入、移出和移动事件 $("#mid").mouseover(function(){ //获取被放大图片（事件源对象）的位置 var offset = $(this).offset(); //计算放大图层位置 var y = offset.top; var x = offset.left+$(this).width()+5; //通过css对放大图层定位，并设置可见 $("#did").css({top:y+"px",left:x+"px"}).show(); }).mouseout(function(){ //隐藏放大图层 $("#did").hide(); }).mousemove(function(e){ //输出事件位置 //console.log(e.pageX,e.pageY); //获取当前被放大图层位置 var offset = $(this).offset(); //计算鼠标在被放大图层上的位置 var x = e.pageX - offset.left; var y = e.pageY - offset.top; //设置放大镜图层的滚动位置 $("#did").scrollLeft(x*5-150).scrollTop(y*5-150); }); }); </script> </body>🌟JQuery 事件——拖动效果 .on(“mousemove”)表示绑定事件
$(function(){ //获取拖动div层并绑定鼠标按下和抬起事件 $("#did").mousedown(function(e){ //设置背景颜色 $(this).css("background-color","blue"); //获取当前div层位置 var offset = $(this).offset(); //计算鼠标按在div层上的位置 var x = e.pageX - offset.left; var y = e.pageY - offset.top; //绑定鼠标移动事件 $(document).on("mousemove",function(en){ //定位div图层位置 $("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"}); }); }).mouseup(function(){ $(this).css("background-color","#ddd"); //取消鼠标移动事件 $(document).off("mousemove"); }); }); </script>🌟JQuery 事件——拖动效果 .on(“mousemove”)表示绑定事件
<script> //jquery入口 $(function(){ //获取拖动div层并绑定鼠标按下和抬起事件 $("#did").mousedown(function(e){ //设置背景颜色 $(this).css("background-color","blue"); //获取当前div层位置 var offset = $(this).offset(); //计算鼠标按在div层上的位置 var x = e.pageX - offset.left; var y = e.pageY - offset.top; //绑定鼠标移动事件 $(document).on("mousemove",function(en){ //定位div图层位置 $("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"}); }); }).mouseup(function(){ $(this).css("background-color","#ddd"); //取消鼠标移动事件 $(document).off("mousemove"); }); }); </script>🌟JQuery 事件——阻止事件冒泡
<script> //jquery入口 $(function(){ //获取div层并绑定点击事件 $("#outer").click(function(){ console.log("outer....."); }); $("#inner").click(function(e){ console.log("inner....."); //阻止事件冒泡（传播） e.stopPropagation(); }); }); </script>
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
