jq选择器的不同方法和学习知识

原创 2019-06-24 19:17:47 198
摘要:<!DOCTYPE html><html><head charset="utf-8"> <title>内容选择器</title> <script type="text/javascript" src="css/jquery-3.4.1.min.js"></scr

<!DOCTYPE html>

<html>

<head charset="utf-8">

<title>内容选择器</title>

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

<style type="text/css">

div{width: 100px;height: 100px;background:#ccc;margin-top: 20px;}

</style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function () {

$('div:contains(jion)').css('background','blue')

$('div:has(span)').css('color','red')

$('input[type]').css('background','red')

$('input[name]').css('background','blue')

$('body').css('background','#ccc')

//改变多个css样式

$('p').css({'color':'red','font-size':'20px'})


})

</script>

<div>jack</div>

<div>jun</div>

<div>jack cheng</div>

<div>jion</div>


<div><span>php中文网</span></div>


<form>

<label>1</label><input type="" name1=""><br>

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

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

<label>4</label><input type="" name2=""><br>

</form>

<p>欢迎你使用php中文网</p>


</body>

</html>


批改老师:查无此人批改时间:2019-06-25 17:49:24
老师总结:完成的不错。jq比js简单很多,多练习。继续加油。

发布手记

热门词条