简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4月3日jquery选择器作业
Blogger Information
Blog 24
fans 0
comment 0
visits 15265
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月3日jquery选择器作业
小蚂蚁的博客
Original
659 people have browsed it

实例

<!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>
	

运行实例 »
点击 "运行实例" 按钮查看在线实例

    

选择器要从新敲打几遍和复习几遍才能慢慢的应用！

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！