weixin_34185560
weixin_34185560

Css选择器和JQuery基本编程接口

使用JQuery之前，首先从官网下载库文件

http://jquery.com/

jquery-2.1.4.js和jquery-2.1.4.min.js，前者是完整无压缩版本，用于开发调试；后者是压缩版本，用于正式产品环境。在页面中引入jquery只需要将库文件放置到一个公共文件位置，然后在使用页面中直接引入即可。

1 <script src="../scripts/jquery-2.1.4.js" type="text/javascript">script>
2 <script type="text/javascript">
3     //等待dom元素加载完毕，其他关联元素还未加载完全就可以执行
4     $(document).ready(function(){
5         alert("Hello World!");
6     });
7 script>

#1 在JQuery库中符号’$’跟字符串’jquery’是完全等价的字段；

#2 $(document).ready(function() {…..});是等待页面中所有DOM结构渲染完毕就会执行，不必等所有DOM关联的元素加载完全，可以简写成$(function() {…..});而window.onload = function() {….};则需要等所有内容加载完毕才执行；

使用$(‘#id’)获取的值永远都是对象，即使网页上没有这个元素；因此需要使用下述代码判断某个元素在网页上是否存在。

1 if ($(‘#id’}.length > 0) {
2     // do something when the object is existing. 
3 }

 

JQuery与CSS使用的选择器

基本选择器：

#1 $(‘#test’):                    选取id为test的元素

#2 $(‘.test’):                     选取所有class为test的元素

#3 $(‘p’):                           选取所有

元素

#4 $(‘div, p.test’):           选取所有

元素，选取所有

元素中class为test的元素

层次选择器：

#1 $(‘div span’):                            选取

内部所有的元素

#2 $(‘div > span’):           选取

下一级所有的元素

#3 $(‘.one + div’):           选取class为one的元素后面第一个

元素，等价于$(‘.one’).next(‘div’);

#4 $(‘#two ~ div’):          选取id是two的元素后面所有

元素，等价于$(‘#two’).nextAll(‘div’);

#5 $(‘#prev’).siblings(‘div’);        选取id是prev的元素前后左右同辈

元素；

过滤选择器：

#1 $(‘div : first’):             选取第一个

元素

#2 $(‘div  : last’):             选取最后一个

元素

#3 $(‘div : eq(3)’):           选取第三个

元素

表单选择器

 

JQuery常用操作：

1 $("input:eq(0)").click(function(){
2     $("p").attr("title","选择你最喜欢的水果.");
3     $("#multiple").val(["选择2号", "选择3号"]);
4     $(":checkbox").val(["check2","check3"]);
5 });

#1 获取jquery元素，$(“input”)表示仅选择元素，$(“:input”)表示选择所有输入元素,