<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入jquery库 --> <script src="../js/jquery.js"></script> </head> <body> <h2>我是h2</h2> <h1>第一个</h1> <h3 id="tree" class="name"> <h3>第二个</h3> <h4>第一个子类</h4> <h4>第二个子类</h4> <h4>第三个子类</h4> </h3> <h1>第三个</h1> <h4>第四个</h4> <ul> <li>第一个</li> <li>第二个</li> <li class="h">第三个</li> <li id="a">第四个</li> <li class="asas">第五个</li> </ul> <script> //jQuery如何表示加载事件? //ready()方法用于在当前页面加载完成后执行 $(document).ready(function (){ //加载事件触发的内容 alert('Hello,jQuery!'); }); //jQuery如何操作元素 以及让元素做什么事 //jQuery基础选择器 $("h3").html("这是标签选择器"); $(".name").html("这是类选择器"); $("#tree").html("这是id选择器"); $("h1,#tree").html("这是并集选择器"); //jQuery层次选择器 $("h3>h4").html("子类选择器"); $("h3 h4").html("后代选择器"); $("h3~h1").html("层次选择器"); $("h3+h1").html("相邻元素选择器"); $(function (){ //jquery语法不仅能调用方法 $('h3').hide(); //隐藏选中的标签元素 //还能添加事件 $('h4').mouseover(function (){ //鼠标移入事件 $('h3').show(); //显示选中的标签元素 }); }); $(function (){ //jquery基础过滤选择器 html方法 $('li:not(#a)').html('not里面可以放标签或选择器,选取除了给定外的所有元素'); $('li:even').html('下标为偶数'); $('li:odd').html('下标为奇数'); $('li:first').html('第一个元素'); $('li:last').html('最后一个元素'); jquery基础过滤选择器 css样式写法 $('li:even').css("background-color","red"); $('li:odd').css("background-color","green"); $('li:lt(3)').css("color","white"); //jQuery属性选择器 $('li[class!="asas"]').css("color","black"); $('li[class^="a"]').css("color","red"); $('li[class="asas"]').css("color","green"); $('li[class]').css("color","white"); }); //解决美元符号"$"冲突的问题如下 (在其他库之前导入jQuery库,美元符号"$"可以直接使用jQuery“) //方式一:使用jQuery.noConflict()函数将美元符号"$"的控制权移交给其它JavaSript库。 //方式二:接收jQuery.noConflict()函数返回的jQuery引用,自定义一个新的快捷键符号。 /* var $j = jQuery.noConflict(); //自定义一个新的”$j“符号 $j(function (){ console.log("在控制台输出!"); }) */ </script> </body> </html>
04-01
210
09-29
1517
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交