jQuery学习笔记——选择器

最新推荐文章于 2019-08-20 15:26:46 发布

ruffianfish

最新推荐文章于 2019-08-20 15:26:46 发布

阅读量198

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/xiaoleng_pj/article/details/50966558

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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');
})

ruffianfish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记——选择器

1:jquery jquery是一个 JavaScript 库，极大地简化了 JavaScript 编程，很容易学习。2:环境搭建 1):下载jquery在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。 2）引入jquery在页面的头部分()，加入下述代码后，便完成了jQuery框架开发环境的搭建3:j
复制链接

扫一扫