4月3日jquery选择器作业

实例

<!DOCTYPE html>
<html>
<head>

实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常用的过滤方法</title>
</head>
<body>
    <ul>
        <li>最新恐怖电影1<a href="">立即播放</a></li>
        <li>最新恐怖电影2<a href="">立即播放</a></li>
        <li>最新恐怖电影3<a href="">立即播放</a></li>
        <li>最新恐怖电影4<a href="">立即播放</a></li>
        <li>最新恐怖电影5<a href="">立即播放</a></li>
        <li>最新恐怖电影6<a href="">立即播放</a></li>
        <li>最新恐怖电影7<a href="">立即播放</a></li>
        <li>最新恐怖电影8<a href="">立即播放</a></li>
        <li>最新恐怖电影9<a href="">立即播放</a></li>
        <p>岛国新电影</p>
        <li>最新恐怖电影10<a href="">立即播放</a></li>
    </ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.js"></script> -->
<script type="text/javascript">

  // get()方法  就是将jquery对象转换为DOM对象
  $('li').get(1).style.color='pink'

// eq()方法就是返回指定元素，返回的是jquery对象
  $('li').eq(5).css('color','red')


// first()无参数，返回第一个
  $('li').first().css('color','green')

// last()无参数，返回最后一个
  $('li').last().css('color','pink')

// toArray（）无参数，返回的是SOM数组，
// 选择所有的li文本变为红色
  var li=$('li').toArray()
      for(var i=0; i<li.length;i++){
          li[i].style.color='red'
      }

// find返回所有后代元素，获取ul下面的所有li改成绿色
$('ul').find('li').css('color','green')

// 将ul下面的A表签改成蓝色
$('ul').find('a').css('color','lightgreen')
  // children()返回的所有直接子元素
  $('ul').children('p').css('color','deeppink')


  $('*').removeAttr('style')
  // each(fuction(){})变力获取li然后回调
  // this当前对象背景改为wheat
 $('li').each(function(){
    $(this).css('background-color','wheat')
 })
// 清除
 $('*').removeAttr('style')
 // 遍历方法next就是eq（下一个）
 $('li').eq(4).next().css('color','blue')
 // 从第6个开始选择同级的子元素到最后背景元素
 $('li').eq(6).nextAll().css('color','blue')
 // 选择前后所有的同级元素改变颜色
 $('li').eq(1).siblings().css('color','blue')

 $('*').removeAttr('style')
// add()方法相当于将P标签前面（li）的即可中
 // $('li').add('p')css('color','lightgreen')



 $('*').removeAttr('style')
    // silce()从集合中获取一段连续的元素
    // 不选择最后最后一个位置的元素
 $('li').slice(2,6).css('color','lightgreen')



</script>
实例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用的过滤方法</title>
</head>
<body>
	<ul>
		<li>最新恐怖电影1<a href="">立即播放</a></li>
		<li>最新恐怖电影2<a href="">立即播放</a></li>
		<li>最新恐怖电影3<a href="">立即播放</a></li>
		<li>最新恐怖电影4<a href="">立即播放</a></li>
		<li>最新恐怖电影5<a href="">立即播放</a></li>
		<li>最新恐怖电影6<a href="">立即播放</a></li>
		<li>最新恐怖电影7<a href="">立即播放</a></li>
		<li>最新恐怖电影8<a href="">立即播放</a></li>
		<li>最新恐怖电影9<a href="">立即播放</a></li>
		<p>岛国新电影</p>
		<li>最新恐怖电影10<a href="">立即播放</a></li>
	</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../jquery.js"></script> -->
<script type="text/javascript">

  // get()方法  就是将jquery对象转换为DOM对象
  $('li').get(1).style.color='pink'

// eq()方法就是返回指定元素，返回的是jquery对象
  $('li').eq(5).css('color','red')


// first()无参数，返回第一个
  $('li').first().css('color','green')

// last()无参数，返回最后一个
  $('li').last().css('color','pink')


  var li=$('li').toArray()
      for(var i=0; i<li.length;i++){
      	li[i].style.color='red'
      }

$('ul').find('li').css('color','green')


$('ul').find('a').css('color','lightgreen')
  
  $('ul').children('p').css('color','deeppink')


  // $('*').removeAttr('style')
 $('li').each(function(){
    $(this).css('background-color','wheat')
 })

 $('*').removeAttr('style')
 $('li').eq(4).next().css('color','blue')
 $('li').eq(6).nextAll().css('color','blue')
 $('li').eq(1).siblings().css('color','blue')

 $('*').removeAttr('style')

 // $('li').add('p')css('color','lightgreen')



 $('*').removeAttr('style')

 $('li').slice(2,6).css('color','lightgreen')



</script>
	

运行实例 »
点击 "运行实例" 按钮查看在线实例
选择器要从新敲打几遍和复习几遍才能慢慢的应用！
实例

相关文章
