返回jquery的......登陆

jquery的选择器

Kevin King2019-06-14 11:48:1644

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jquery中的选择器</title>

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

<style type="text/css">

#id0{width: 100px;height: 100px;background-color: #ccc;margin: 20px;}

.cont0{width: 100px;height: 100px;margin: 20px;background-color: #ccc;}

</style>

</head>

<body>

<script type="text/javascript">

//基本选择器

//语法

//$('#id名')ID选择器

//$('.class')class选择器

//$('elemen')标签选择器

//$('*')匹配所有元素

//$('#ID,class名,element')多项选择器

$(document).ready(function(){

$('.class0').click(function(){

$('#id0').css('background-color','red')

});

//层级选择器

//$('父级元素 > 子级元素') 给定的父级元素下匹配所有的子级元素

//$('祖先元素 后代元素') 给定的祖先元素下匹配所有的后代元素

//$('prev + next') 匹配紧跟在prev元素后面的next元素

//$('prev ~ siblings') 匹配prev元素后面所有的siblings元素

$('ul>li').css('list-style','none');

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

//顺序选择器

//1、顺序

// $(':first')第一个元素

// $(':last')最后一个元素

// 2、比较

// $(':gt(x)')表示大于x的元素

// $(':lt(x)')表示小于x的元素

// $(':eq(x)')表示等于x的元素

// 3、奇偶数

// $(':odd')奇数顺序

// $(':exen')偶数顺序

// 4、非

// $(':ont(selector)')匹配不是selector的所有元素

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

$('p:gt(3)').css('font-size','40px');

$('p:odd').css('font-weight','bold');

// 内容选择器

// 语法

// $(':contains(text)')匹配包含给定文本的元素

// $(':has(selector)')匹配包含特殊选择器元素的元素

// $(':empty')匹配不含有内容的元素( 即 不包含子元素或者文本的空元素)

// $(':parent')匹配含有子元素或者文本的元素

$('div:contains(jion)').css('background-color','red');

$('div:empty').css('background-color','#203456');

// 属性选择器

// 语法

// $('[attribute]')匹配包含给定属性的元素

// $('[attribute=value]')匹配给定属性是某个特定值的元素

// $('[attribute!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素

// $('[attribute^=value]')匹配给定属性是以某些值开始的元素

// $('[attribute$=value]')匹配给定属性是以某些值结尾的元素

// $('[attribute*=value]')匹配给定属性包含某些值的元素

// $('attribute[1] attribute[2] attribute[3]')复合选择器,需要同时满足多个条件时使用

$('#form input[type]').css('background-color','red');

$('#form input[type=button]').css('background-color','blue');

// 表单选择器

// 语法

// $(':enabled')所有激活的input元素(可以使用的input元素)

// $(':disabled')所有禁用的input元素(不可以使用的input元素)

// $(':selected')所有被选取的元素,针对于select元素

// $(':checked')所有被选中的input元素

$('#form1 input:enabled').css('background-color','red');

$('#form1 input:checked').parent().css('color','blue')

})

</script>

<!-- 基本选择器 -->

<div id="id0"></div>

<button class="class0">点击</button>

<!-- 层级选择器 -->

<ul>

<li>1</li>

<li>1</li>

<div>

<li>2</li>

</div>

<li>1</li>

<li>1</li>

<li>1</li>

<li>1</li>

</ul>

<!-- 顺序选择器 -->

<p>1</p>

<p>2</p>

<p>3</p>

<p>4</p>

<p>5</p>

<p>6</p>

<p>7</p>

<p>8</p>

<!-- 内容选择器 -->

<div class="cont0">jack</div>

<div class="cont0">mark</div>

<div class="cont0">jion</div>

<div class="cont0">blus</div>

<div class="cont0"></div>

<!-- 属性选择器 -->

<form id="form">

<label>1</label><input type="text" name=""><br>

<label>2</label><input type="password" name=""><br>

<label>3</label><input name=""><br>

<label>4</label><input type="button" value="点击"><br>

</form>

<!-- 表单选择器 -->

<form id="form1">

输入框1<input type="" name=""><br>

输入框2<input type="" name=""><br>

输入框3<input type="" name="" disabled=""><br>

输入框4<input type="" name=""><br>

<label><input type="checkbox" name="">足球</label>

<label><input type="checkbox" name="" checked>篮球</label>

<label><input type="checkbox" name="">跑步</label>

</form>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网