JQuery基本知识

最新推荐文章于 2024-09-19 14:37:27 发布

bald_proMonkey

最新推荐文章于 2024-09-19 14:37:27 发布

阅读量137

点赞数

分类专栏：笔记文章标签： jQuery 筛选器隐式迭代排他思想 $

本文链接：https://blog.csdn.net/bald_proMonkey/article/details/103074249

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、jQuery的基本函数入口：

div{
width: 200px;
height: 200px;
background-color:pink;
  }


<script type="text/javascript" src="../js/jquery.min.js"></script>
<body>


<div></div>
//直接用jQuery中的方法
<script type="text/javascript">
   // $('div').hide();
 //1、等着页面DOM加载完毕再去执行js代码
   $(document).ready(function(){
$('div').hide();
   })
   //2等着页面DOM加载完毕再去执行js代码
 $(function(){
$('div').hide();
})
 </script>
</body>

2、是jQuery的一个顶级对象，就是jQuery的别名,一般为了方便，通常都直接使用$

3、jQuery对象和DOM对象

3.1用原生的js获取来的对象就是DOM对象
3.2jQuery方法获取的元素就是jQuery对象
3.3jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

<script type="text/javascript">
  //1、DOM对象：用原生js获取过来的对象就是DOM对象
  var myDiv=document.querySelector('div');
  var mySpan=document.querySelector('span');
  console.dir(myDiv);
  //2、jQuery对象：用jQuery方式获取过来的是jQuery对象，本质：通过$把DOM元素进行了包装
  $('div');
  $('span');
  console.dir($('div'));
  //3、jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法
   //myDiv.style.display='none';
  // myDiv.hide();//myDiv是一个dom对象，不能使用jQuery里面的hide()方法
 // $('div').style.display='none';//这个$('div')是一个jQuery对象，不能使用原生的js的属性和方法
  </script>

4、隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代，简单的理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

jQuery的筛选选择器

$(function(){
  $('ul li:first').css('color','red');//表示将ul里面的第一个li的css样式颜色改为红色
  $('ul li:odd').css('color','blue');//将ul中的奇数行的li的颜色改为蓝色
  $('ol li:eq(0)').css('color','red');//将ol中的第一个li样式改为红色
  $('ol li:last').css('color','blue');//将ol中的最后一个li的颜色改成蓝色
  $('ol li:even').css('color','skyblue');//将ol中的偶数行的li的颜色改为skyblue
})

jQuery的排他思想：

例子：在body中写几个button按钮,通过下面的代码可以实现点击任何一个按钮只有自己一个按钮改变背景颜色

   $(function(){
	//隐式迭代 给所有的按钮都绑定了点击事件
  $('button').click(function(){
  	//当前的元素变化背景颜色
 $(this).css('background','red');
 //其余的兄弟失去背景颜色 隐式迭代
 $(this).siblings('button').css('background','');
  })
})