jquery选择器

scralet-moon

于 2018-12-05 15:29:19 发布

阅读量74

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84837089

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

jquery用法思想 选择某个网页元素，然后对它进行某种操作

jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同

基础选择器

//通过id来获取元素 document.getElementById();
// $('#logo').css('border','solid 2px red');

//通过标签名来获取元素
// $('li').css('background','#369');

//通过class类名获取元素
// $('.w').css('background','#369');

//逗号 并列获取
// $('#logo,#menu').css('background','#369');

//空格 层级获取
// $('#images li').css('background','#369');

过滤获取

//获取第一个和最后一个元素
// $('li:first').css('background','#369');
// $('li:last').css('background','#369');
//获取指定索引的元素 索引从0开始 
// $('li:eq(7)').css('background','#369');
// $('li').eq(7).css('background','#369');
//获取包含指定文本的元素
// $('li:contains(国)').css('background','#369');
//选择所有的name属性等于'newsletter'的input元素 
$("input[name='newsletter']").css('background','#369');

父子关系获取

//获取所有的子元素
// $('#images').children().css('background','#369');

//获取第一个子元素
// $('ul li:first-child').css('background','#369');

//获取最后一个子元素
// $('ul li:last-child').css('background','#369');

//获取指定索引的子元素 索引从1开始
// $('ul li:nth-child(3)').css('background','#369');

//获取元素上一个同级元素
// $('#f').prev().css('background','#369');

//获取元素下一个同级元素
// $('#f').next().css('background','#369');

//获取同辈元素 (同辈元素不包含自己)
// $('#f').siblings().css('background','#369');

//获取父级元素
// $('#f').parent().css('background','#369');

//获取先辈级元素
//parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。沿 DOM 树一路向上直到 <html>
// $('#f').parents('#all').css('border','solid 1px red');

//在父级元素中查找指定的子元素,find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
//$('#images').find('.w').css('background','#369');