jQuery选择器

jQuery的简介

    是一个轻量级的JS库-是一个被封装好的JS文件。提供了更为简便的页面元素操作方式；

极大地简化了 JavaScript 编程。

//引入jquery     $(document).ready(function(){//等待dom元素加载完毕，类似window.onload()        alert("Hello World");    )}; 

jQuery选择器

     选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。介绍几种常用选择器：

1、基本选择器

     基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id,class 和标签名来查找 DOM 元素(在网页中id 只能使用一次, class 允许重复使用）

举个例子

                   

    id 为 one,class 为 one 的div   

class为mini

    id为two,class为one,title为test的div   

class为mini,title为other

   

class为mini,title为test

   

class为mini

   

class为mini

   

class为mini

   

   

class为mini

   

class为mini

   

class为mini

   

class为mini,title为tesst

style的display为"none"的div

class为"hide"的div

    包含input的type为"hidden"的div

^^span元素^^

过滤选择器

    过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM 元素, 该选择器都以“:”开头

举个例子

Untitled Documentdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#0001pxsolid;float: left;font-size:17px;font-family: Verdana;        }div.mini{width:55px;height:55px;background-color:#aaa;font-size:12px;        }div.hide{display: none;        }$(document).ready(function(){functionanmateIt(){$("#mover").slideToggle("slow", anmateIt);            }            anmateIt();$('#btn1').click(function(){$("div:first").css("background","#ffbbaa");            });$('#btn2').click(function(){$('div:last').css('background','#ffbbaa');            });$('#btn3').click(function(){$('div:not(.one)').css('background','#ffbbaa');            });$('#btn4').click(function(){$('div:even').css('background','#ffbbaa');            });$('#btn5').click(function(){$('div:odd').css('background','#ffbbaa');            });$('#btn6').click(function(){$('div:gt(3)').css('background','#ffbbaa');            });$('#btn7').click(function(){$('div:eq(3)').css('background','#ffbbaa');            });$('#btn8').click(function(){$('div:lt(3)').css('background','#ffbbaa');            });$('#btn9').click(function(){$(':header').css('background','#ffbbaa');            });$('#btn10').click(function(){$(':animated').css('background','#ffbbaa');            });$('#btn11').click(function(){$('#two').nextAll('span:first').css('background','#ffbbaa');            });        })

基本选择器.

    id 为 one,class 为 one 的divclass为mini    id为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesststyle的display为"none"的divclass为"hide"的div

包含input的type为"hidden"的div

^^span元素 111^^^^span元素 222^^正在执行动画的div元素.

内容过滤选择器：

    内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

//改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa//改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa//改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa//改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa$(document).ready(function(){$('#btn1').click(function(){$("div:contains('di')").css('background','#ffbbaa');          });$('#btn2').click(function(){$('div:empty').css('background','#ffbbaa');          });$('#btn3').click(function(){$('div:has(.mini)').css('background','#ffbbaa');          });$('#btn4').click(function(){$("div:parent").css("background","#ffbbaa");// $('div:not(empty)').css('background','#ffbbaa');          })        })

可见性过滤选择器

    可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

$(document).ready(function(){$('#btn1').click(function(){$('div:visible').css('background','#ffbbaa');        });$('#btn2').click(function(){$('div:hidden').show(2000).css('background','#ffbbaa');        });$('#btn3').click(function(){alert($("input:hidden").val());        })      })

属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

$(document).ready(function(){$('#btn1').click(function(){$('div[title]').css('background','#ffbbaa');            });$('#btn2').click(function(){$("div[title='test']").css('background','#ffbbaa');            });$('#btn3').click(function(){$("div[title!='test']").css('background','#ffbbaa');            });$('#btn4').click(function(){$("div[title^='te']").css('background','#ffbbaa');            });$('#btn5').click(function(){$("div[title$='est']").css('background','#ffbbaa');            });$('#btn6').click(function(){$("div[title*='es']").css('background','#ffbbaa');            });$('#btn7').click(function(){$("div[id][title*='es']").css('background','#ffbbaa');            });$('#btn8').click(function(){$("div[title][title!='test']").css('background','#ffbbaa');      });   })

表单对象过滤选择器

$(function(){$('#btn1').click(function(){$(':text:enabled').val('刘德华');        });$('#btn2').click(function(){$(':text:disabled').val('张学友');        });$('#btn3').click(function(){varnum= $(":checkbox[name='newsletter']:checked").length;          alert(num);        });$('#btn4').click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);          });        });$('#btn5').click(function(){$('select :selected').each(function(){alert(this.value);          });         });      })      对表单内 可用input 赋值操作.

获取多选框选中的个数.获取多选框选中的内容.

获取下拉框选中的内容.