// 1.选择器练习
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
<script>
// jquery入口函数第三种
$(function() {
var div = $('div');
console.log(div);
alert(div);
//通过id获取元素
var div = $('#myDiv1');
console.log(div);
//通过类名获取元素
var div = $('.continer');
console.log(div);
console.log(div.length);
console.log(div[1]);
//获取紧接着第一个选择器的元素
var span1 = $('.div_01 + span');
console.log(span1);
//获取第一个选择器之后的同辈元素
var span2 = $('.div_01 ~ span');
console.log(span2);
//获取一个给定索引值的元素
var divEq = $('div:eq(1)');
console.log(divEq);
//获取匹配的第一个元素
console.log($('li:first'));
//查找所有未选中的 input 元素
console.log($("input:not(:checked)"));
//匹配所有索引值为偶数的元素,从 0 开始计数
console.log($("tr:even"));
//匹配所有索引值为奇数的元素,从 0 开始计数
console.log($("tr:odd"));
})
</script>
<div id="myDiv1" class="continer"></div>
<div id="myDiv2" class="continer"></div>
<div id="wrap">
<span>div1上的 span标签</span>
<div class="div_01">第一个div</div>
<span id="spanDown">div1下的 span标签</span>
<span id="spanDown1">div1下的 span标签</span>
<div>第二个div</div>
<div>第三个div</div>
</div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input name="apple" />
<input name="flower" checked="checked" />
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
</body>
//2.样式练习
<head>
<meta charset="UTF-8">
<title>练习样式操作</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<style>
.wrap1 {
width: 50px;
height: 50px;
border: 2px solid yellow;
}
.wrap2 {
width: 500px;
height: 500px;
background: red;
}
</style>
</head>
<body>
<script>
$(function() {
//首先获取元素,分开设置样式
var div = $('.wrap');
div.css('width', '200px');
div.css('height', '200px');
div.css('border', '1px solid red');
//一起设置样式
div.css({
width: '300px',
height: '300px',
border: '1px solid blue',
boxShadow: '5px 5px 10px 5px black',
//给选中的元素添加class类名;
$('.wrap').addClass('wrap1');
//把选中的元素的class类名删除;
$('.wrap').removeClass('wrap1');
// 对设置和移除所有 wrap类的 wrap2 类进行切换:
$('.wrap').toggleClass('wrap2');
});
</script>
<div class="wrap">
</div>
</body>
本文地址:https://blog.csdn.net/weixin_47720233/article/details/107492402
如对本文有疑问, 点击进行留言回复!!
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论