jquery

1. jQuery简介：

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

2. CSS选择器：

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

3. jQuery事件绑定：

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

4. 操作表单元素：

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

5. 显示/隐藏和动画效果：

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

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

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

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

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

8. 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一样
     后代选择器:注意空格