实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的jquery的选择器方法</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// jQuery选择器的方法:
// 1.add() 该方法用于添加进已经返回jquery对象的方法
$('.nav > li').add('a').css('color','blue')
// 2.first() 类似于css中的first-child 无参数
$('li').first().css('color','lightblue')
// 3.last() 类似于css中的last-child 无参数
$('li').last().css('color','darkturquoise')
// 4.find() 在返回的jq对象中查找符合的元素方式
$('li').find('a').css('color','green')
// 5. eq(n)直接选中 n是指索引斌不是css中的序列号
$('li').eq(5).css('color','deeppink')
// 6.get() 转换DOM操作的方法
$('li').get(7).style.color='red'
// 7.toArray() 转换原生的js方法
// 8.next() 类似于 css中的 +兄弟选择器
$('li:nth-child(4)').next().css('color','cyan')
// 9.each()回调函数 循环
$('li').each(function(){
$(this).css({'color':'red','font-size':'1.2em','background':'lightblue'})
})
// 10.addClass()加类样式
$('li > a').addClass('ck')
// 11. removeAttr() 移除属性
$('li').removeAttr('style')
// 12. removeClass() 移除类样式
$('li>a').removeClass('ck')
// 13.attr()添加属性 替换属性值
} )
</script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;text-decoration: none;color: #4C4C4C;margin: 20px;}
.ck{color: palevioletred;font-size: 1.2em;font-weight: bolder;}
</style>
</head>
<body>
<ul class="nav">
<li>这里是li的标签内容<a href="#">01这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">02这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">03这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">04这是一个超链接</a></li>
<li id="five">这里是li的标签内容<a href="#">05这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">06这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">07这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">08这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">09这是一个超链接</a></li>
<li>这里是li的标签内容<a href="#">10这是一个超链接</a></li>
<ul>
<li>01这是一个li标签</li>
<li>02这是一个li标签</li>
<li>03这是一个li标签</li>
<li>04这是一个li标签</li>
<li>05这是一个li标签</li>
<li></li>
</ul>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>表单过滤器</title>
<style type="text/css">
*{margin: 0;padding: 0;}
form{
width: 500px;
height: 500px;
background-color: lightcyan;
border-radius: 20px;
margin:30px auto;
}
form h2{
text-align: center;
}
form p{
margin: 20px;
}
</style>
<script type="text/javascript">
$(function(){
//:input 选择所有的input类型标签
$(':input').css({'background-color':'lightblue'})
//:input 选择所有的input标签
$('input:input').css({'background-color':'red'})
//类型是password的input标签 css方式是input[type="password"]
$(':input:password').css({'background-color':'blue'})
//所有类型是text的标签
$(':text').css({'border':'none'})
//类型是file的类型
$(':file').css('background-color','lightcoral')
$('#reset,#submit').css({
'border':'none',
'background-color':'orange',
'color':'white',
'font-size':'1.2em',
'border': 'none',
'width':'90px',
'height':'40px','margin-left':'80px','border-radius':'10px'
})
})
</script>
</head>
<body>
<form action="" method="post">
<h2>用户注册</h2>
<p>用户名称：<input type="text" id="name" value="" placeholder="请输入您的用户名"/></p>
<p>用户密码：<input type="password" name="pwd" placeholder="请输入密码" /></p>
<p>确认密码：<input type="password" name="pwd" placeholder="请确认确认密码"/></p>
<p>性 别：<input type="radio" name="sex" id="sex" value="male" />男
<input type="radio" name="sex" id="sex" value="remale" />女
</p>
<p>爱 好:
<input type="checkbox" name="hobby[]" id="movie" value="" />看电影
<input type="checkbox" name="hobby[]" id="playgame" value="" />玩游戏
<input type="checkbox" name="hobby[]" id="shopping" value="" />逛街
<input type="checkbox" name="hobby[]" id="booking" value="" />看书
</p>
<p>技术水平：<select name="level">
<option value="01"selected="selected">小白</option>
<option value="02">入门</option>
<option value="03">精通</option>
<option value="04">大神</option>
</select></p>
<p>上传头像：<input type="file" name="file" id="file" value="" /></p>
<p>个人简介：<textarea name="info" rows="5" cols="50" placeholder="请输入与您个人的简历"></textarea></p>
<p><input type="reset" name="reset" id="reset" value="重置" />
<input type="submit" name="submit" id="submit" value="注册" /></p>
<p><input type="hidden" name="hidden" id="hidden" value="" disabled="disabled"/></p>
<input type="submit" value=""/>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// $('li').css({
//
// 'float': 'left',
// 'list-style': 'none',
// 'width': '50px',
// 'height': '50px',
// 'background':'lightblue',
// 'border-radius': '50%',
// 'margin': '20px',
// 'text-align': 'center',
// 'line-height': '50px',
// 'font-size': '1.2em',
//
// })
var span= '<span>span内容</span>'
$('li').addClass('list')
$('li').attr('title','name')
// $("li").removeClass()
// $('li').removeAttr('class')
//偶数行数组的索引
$('li:even').css('color','red')
//期数行 数组的索引
$('li:odd').css('background-color','green')
//大于 $('li:gt(n)') n索引 是指大于不等于n
$('li:gt(1)').css('color','lightpink')
//小于 $('li:lt(n)') n索引 是指小于不等于n
$('li:lt(8)').css('font-size','1.5em')
//:contains() 过滤器 括号里面的参数为文本
$('li:contains("06")').css('border-radius','5px')
//:empty 选择空元素的标签 text()插入文本纯文本不能解析标签
$(':empty').text("北京赛车pk10").css({'text-align':'center'})
//has()拥有 在p元素里面拥有img的p元素 before 在...之前 可以解析标签 同理有after()
$('p').has('img').before('<img src="images/1.jpg"/>')
//以p为父级的p元素
$('p:parent').attr('alt','头像')
//:not 取反
$(':not(:empty)').css('border-radius','5px')
})
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{overflow: hidden;}
.list{
float: left;
list-style: none;
width: 50px;
height: 50px;
background:lightblue;
border-radius: 50%;
margin: 20px;
text-align: center;
line-height: 50px;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1></h1>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
<p>刘诗诗<img src="" alt="" /></p>
<p><a href="">超级链接</a></p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
