jquery

jQuery简介：

• 使用脚本标签导入jQuery库。
• 对jQuery的基本了解，其中$代表jQuery。

CSS选择器：

• 使用CSS选择器如.li3、.li3+li和.li3~li。
• 演示如何使用这些选择器为特定元素应用样式。

jQuery事件绑定：

• 使用jQuery绑定事件，如click事件。
• 将jQuery事件绑定与原生JavaScript事件处理进行比较。

操作表单元素：

• 使用jQuery检索和设置表单元素的值。
• 访问和修改元素的文本和HTML内容。

显示/隐藏和动画效果：

• 使用show、hide、slideDown、slideUp、slideToggle、fadeIn、fadeOut和fadeTo控制元素的可见性和动画效果。
• 引入动画中的回调函数的概念。

使用animate()进行自定义动画：

• 利用animate()执行具有指定样式、速度、缓动和回调的自定义动画。

理解BOM（浏览器对象模型）：

• 简要介绍BOM中的offset、scroll和client家族。
• 解释属性如offsetWidth、offsetHeight、scrollWidth、scrollHeight、scrollTop、scrollLeft、clientWidth和clientHeight。

jQuery选择器和样式：

• 使用jQuery按ID、类和后代选择器选择元素。
• 使用jQuery的css()方法设置样式。

• <!-- jQuery是一个库, 使用前应该先引入.下面这行代码是引入jQuery字库的,也就是引入jQuery文件 -->
  <script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
  
  JQuery下载地址 : http://www.jq22.com/jquery-info122
  JQuery文档 : http://jquery.cuishifeng.cn/
  加载事件
  1. $(document).ready(function(){});
  2. $(function(){}); 推荐
  jquery 就是 $ , $ 就是代表了jquery
  了解 : 源码: window.jQuery = window.$ = jQuery;
  
  
  
  .li3{
  font-size: 20px;
  color: red;
  }
  /*+ 紧接下一个兄弟元素*/
  .li3+li{
  color:blue;
  }
  /*~ 该元素后面所有的兄弟节点*/
  .li3~li{
  background-color: yellow;
  }
  
  
  jq绑定方法 不需要on,而且click接受的参数为 函数类型
  
  js原生
  var d1 = document.getElementsByClassName('d1')[0] ;
  d1.onclick=function(){
  alert('yyyy');
  } ;
  
  1. input获取/设置表单内容
  表单的值是 value
  $('.btn1').click(function () {
  alert($('.username').val());
  })
  $('.btn2').click(function() {
  $('.username').val('张三');
  })
  //2. 获取标签内容 text 对应JS中的innerText
  $('.d1').click(function() {
  alert($(this).text());
  })
  //3. 获取html 对应JS中innerHtml
  $('.ul').click(function () {
  $(this).html('<a href="#" class="aa">你好</a>');
  })
  
  //4. 二者区别
  $('.p1').click(function(){
  alert($(this).html()) ;
  alert($(this).text()) ;
  $(this).html('<a href="#" class="aa">你好pppppppppppp</a>') ;
  }) ;
  
  
  // 1.show
  $('.btn1').click(function () {
  //a. 直接显示
  // $('.d1').show();
  // 显示效果 : slow：600ms、normal：400ms、fast：200ms
  //b. 渐显
  // $('.d1').show(2000);
  //c. 显示完后,执行函数 : 回调函数
  $('.d1').show(4000,function(){
  $('.d1').css('background-color','gold') ;
  }) ;
  // 回调函数 :
  })
  //2. hide
  $('.hideBtn1').click(function () {
  $('.d1').hide(5000);
  })
  //3. 滑动显示
  $('.btn2').click(function () {
  $('.d1').slideDown('slow');
  })
  //4. 滑动隐藏
  $('.btn3').click(function () {
  $('.d1').slideUp(1000);
  })
  //5. 显示隐藏
  $('.btn4').click(function () {
  $('.d1').slideToggle(1000);
  })
  $('.btn5').click(function () {
  $('.d1').fadeIn(2000);
  })
  $('.btn6').click(function () {
  $('.d1').fadeOut('fast');
  })
  $('.btn7').click(function () {
  //透明度发生变化 到.3
  $('.d1').fadeTo('slow',.3);
  })
  
  回调函数 :
  animate : 英语 : 使有生气===>>制成动画 ====>>> JQ : 自定义动画
  animate() 方法执行 CSS 属性集的自定义动画
  $(selector).animate(styles,speed,easing,callback)
  
  stop(stopAll,goToEnd)
  默认停止所有动画,直接回到最初
  走哪停哪
  
  bom : 浏览器对象模型 了解
  1.offset家族
  offetWidth/offsetHeight 元素宽高 包括padding+border
  offsetTop/offsetLeft 元素距离父类定位元素(body)的距离
  2.scroll家族
  scrollWidth/scrollHeight 元素宽高 不包括border 指的元素内容的宽高
  scrollTop/scrollLeft 元素被卷进去的高度/宽度
  - 可以被赋值
  3.clientWidth/clientHeight 客户端(可视区域)的宽高
  
  
  var d1 = document.getElementById('h1') ;
  JQ中的选择器和CSS中的选择器一致
  d1是一个jquery对象
  获取所有的类名为d1的对象 : 本例中有两个类名叫d1的div
  jq对象.css('attr','value') jq对象具有的css方法能够方便的设置标签对象的样式
  id选择器 : 选中id名为h1的标签,并直接调用css函数,对字体颜色进行设定
  
  通过类名获取具体的元素对象的操作和CSS一样
  后代选择器:注意空格