jQuery选择器及jquery案例详解(必看)

2024-05-06 14:57:56

字体：大中小

来源：转载

供稿：网友

JQuery选择器

解析：为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签

1.层次选择器

<!-- 当点击h2元素时，为#menu下的<span>元素添加色为#09F的颜色背景 --><!-- <script type="text/javascript">$(function () {$('h2').click(function () {$('#menu span').css('background-color','#09F');});});</script>-->

2.基本选择器

<!-- 为标签选择器添加样式 --><script type="text/javascript">$(function () {$('h2').click(function () {$('h3').css('background-color', '#09F');});});</script>

3.基本过滤选择器

<script type="text/javascript">$(function () {$('h2').click(function () {//$('li:first').css('background-color', '#09F');//第一个//$('li:last').css('background-color', '#09F');//最后一个//$('li:not(.three)').css('background-color', '#09F');//class不为three的元素// $('li:even').css('background-color', '#09F');//索引值为偶数的元素// $('li:eq(1)').css('background-color', '#09F');//索引值为1的元素//$('li:gt(1)').css('background-color', '#09F');//索引值大于1的元素//$('li:lt(1)').css('background-color', '#09F');//索引值小于1的元素//$(':header').css('background-color', '#09F');//所有标题的元素$(':focus').css('background-color', '#09F');//获取焦点的元素});});</script>

4.可见性过滤选择器

<script src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function () {// $('p:hidden').show();//显示文字$('p:visible').hide();//隐藏文字});</script><style type="text/css">#txt_show{display:none;color:#00C;}#txt_hide{display:block;color:#F30;}</style></head><body><p id="txt_hide">点击按钮，我会被隐藏哦~</p><p id="txt_show">隐藏的我，被显示了，嘿嘿~</p><input type="button" name="show" value="点击显示文字 " /><input type="button" name="hide" value="点击隐藏文字 " /></body>

5.属性选择器

<!--改变class属性的值为odds的元素的背景颜色 --><script type="text/javascript">$(function () {$("h2").click(function () {$("[class=odds]").css("background-color", "#FFFFFF");})});</script>

Jquery能做什么

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

Jquery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性