.Juqery是javascript的优秀框架。
它是轻量级的js库,它兼容CSS3、各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery有如下特点:
1.提供了强大的功能函数
2.解决浏览器兼容性问题3.实现丰富的UI
4.纠正错误的脚本知识
引入形式:
<script src = "jquery-1.2.2.js " ></script>
基础代码:
①:
<body>
<div>
<div>
<div>
<ol>
<li>111</li><li>112</li><li>113</li><li>114</li><li>115</li>
</ol>
</div>
<ul>
<li>黄色人种</li><li>白色人种</li><li>黑色人种</li><li>棕色人种</li>
</ul>
</div>
<div>
<p>
<a href="#">新浪</a>
<a href="#">网易</a>
<a href="#">腾讯</a>
<a href="#">百度</a>
</p>
<span>
<div>第一组</div>
<div>第二组</div>
<div>第三组</div>
<div>第四组</div>
<div>第五组</div>
</span>
<h3>三号标题</h3><h3>四号标题</h3><h3>五号标题</h3><h3>六号标题</h3>
</div>
<div>
<a href="#">pg28</a> <a href="#">pg30</a> <a href="#">pg32</a>
</div>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
var li=$("li");
alert("1 获取所有的li元素长度:"+li.length);
var ultext=$("ul>li").eq(2).text();
alert("2 获取ul下面的第三个li元素中的文本:"+ultext);
var ps=$("p>a");
alert("3 获取所有p元素下的超链接元素:"+ps.length);
var a = $("a");
alert("4 获取所有的超链接元素:"+a.length);
alert("5 获取第三题中最后一个超链接元素中的文字:"+ps.eq(-1).html());
var span=$("span~h3").eq(0);
alert("6 获取span元素后面的第一个h3元素:"+span.html());
var div=$("div~div");
alert("7 获取div后面的所有的div元素:"+div.length);
var div1 = $("div>ol");
alert("8 获取div的子元素ol:"+div1.html());
var div2 = $("ul~div");
alert("9 获取ul元素后面的所有的div兄弟元素:"+div2.length);
</script>
</body>
②:
<body>
<ol>
<li>苹果</li><li>芒果</li><li>小米</li><li>华为</li><li>桔子</li><li>魅族</li><li></li>
</ol>
<div style="display:none;">看不见我</div>
<div></div>
<span>前面有2个div元素</span>
<script>
var lis = $("li");
//lis = $("li:first");
//lis = $("li:not(:first)"); //不是第一个的
//lis = $("li:even"); //偶数
// lis = $("li:gt(4)"); //匹配所有大于给定索引值的元素,文字是后面的魅族
//lis = $("li:lt(4)"); //匹配所有小于给定索引值的元素,文字是第一个“苹果”
//lis = $("li:contains('果')"); //匹配包含给定文本的元素
lis = $("li:empty"); // 匹配所有不包含子元素或者文本的空元素
alert(lis.length+",,"+lis.html());
var divs=$("div:hidden"); //匹配所有不可见元素,或者type为hidden的元素
divs=$("div:visible"); //匹配所有可见元素
alert(divs.length);
</script>
</body>