您的位置：首页 > Web前端 > JQuery

jQuery学习笔记——选择器

2016-03-23 20:59 741 查看

1:jquery

jquery是一个 JavaScript 库，极大地简化了 JavaScript 编程，很容易学习。

2:环境搭建

1):下载jquery

在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。

2）引入jquery

在页面的头部分(<head>)，加入下述代码后，便完成了jQuery框架开发环境的搭建

<script type="text/javascript" src="jquery.js"></script>

3:jquery四种常见写法

//第一种

$(function(){

alert('aaa');

})

//第二种

$(document).ready(function(){

alert('bbb');

})

//第三种

jQuery(function(){

alert('ccc');

})

//第四种

jQuery(document).ready(function(){

alert('ddd');

})

注：比js里window.onload事件高效，因为不需要整个文档加载结束去执行，而是需要的节点加载完成就去执行。

4:jquery与js互相转换

//js转jquery，只需要用jquery写法把对象包裹起来

var txt = document.getElementById('txt');

var newTxt = $(txt);

console.log(newTxt);

//jquery装js

var txt1 = $('#txt');

var newTxt1 = txt1[0];

var newTxt2 = txt1.get(0);

console.log(newTxt2.value);

5:基本选择器

1)id选择器

$(function(){

$('#ps').css('background','red');

})

2)class类选择器

$(function(){

$('.ps').css('background','red');

})

3)element元素名称选择器

$(function(){

$('p').css('background','red');

})

4)* 选择器（遍历所有元素）

$(function(){

$('ul *').css('color','red');

})

5)并列选择器

$(function(){
$('div,p,span').css('color','red');
})

6:层次选择器

1)ance desc后代选择器

$(function(){

$('div p').css('color','red');

})

2)parent > child（直系子元素）

$(function(){

$('div>p').css('color','red');

})

3)prev + next（下一个兄弟元素，等同于next()方法）

$(function(){

$('#sp+span').css('background','#f0f');

//等同于next()方法

$('#sp').next('span').css('background','#f0f');

})

4)prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

$(function(){

$('#sp~span').css('background','#f0f');

//等同于next()方法

$('#sp').nextAll('span').css('background','#f0f');

})

7:基本过滤选择器

1):first和:last（取第一个元素或最后一个元素）

$(function(){

$('span:first').css('color','blue');

$('span:last').css('color','green');

})

2):not（取非元素）

$(function(){

$('p:not("#ps")').css('color','red');

//$('div>span').css('color','red');

})

3):even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

$(function(){

$('li:even').css('background','#ccc');

$('li:odd').css('background','#f0f');

})

4)eq(x) （取指定索引的元素）

$(function(){

$('p:eq(1)').css('background','red');

})

5):gt(x)和:lt(x)（取大于x索引或小于x索引的元素）

$(function(){

$('p:lt(2)').css('background','blue');

$('p:gt(2)').css('background','red');

})

6):header（取H1~H6标题元素）

$(function(){

$(':header').css('background','blue');

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航