前端基础——JQuery

jQ简介

jquery就是一个javascript函数库，或者说是javascript框架，提供一种简单便利的javascript设计模式

jQ文件引入到网页

<script src="jquery.min.js"></script>

jQ语法

                    jquery(document).ready(function(){    });    //第一种写法

                    $(document).ready(function(){     });           //第二种写法

                    $(function(){   })                                          //第三种写法，最简单，最推荐

jQuery的开发步骤

（将js代码与html分离）

               1、引入jquery相关文件：jquery-3.3.1.min.js等

               2、当文档加载完成触发事件：$(function(){      }) 

               3、在文档加载完成的事件里面：a：进行元素的一系列操作   b：绑定事件

               3、在 b 事件发生触发函数

               4、在函数中对元素进行一系列的操作

• 代码分离的实现

因为：<script type="text/javascript">

                        jquery(document).ready(function(){    });    //第一种写法

                        $(document).ready(function(){     });           //第二种写法

                        $(function(){   })                                          //第三种写法，最简单，最推荐

                  </script>
<script>
			//js文档加载完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*jQuery  简写成 $ */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*最简单的写法 */
			$(function(){
				alert("$(function(){");
			});
			
		</script>

jQ 选择器

ID 选择器：$("#id名") //相当远js中document.getElementById(“id名”); 推荐

  类选择器：$(".class名")

  属性选择器：$("a[href]")        $("a[href='#']")     $("a[href$='com'][title]")    选择器[属性='属性值']

  通配符选择器：$("*")     //匹配所有的元素

  选择器，选择器：选择器,选择器   //同时根据两个选择器找出元素中间为逗号（相当于并集）如果没有逗号 

                              例如：$("p.haha")    //表示<p></p>标签中含有 类名class="haha" 的

基本过滤器：
选择器1：过滤器 //表示在所有的选择器1中过滤出满足条件（过滤器）的选择器

<script>
			$(function(){
				/<script>
			//文档加载事件,页面初始化的操作
			$(function(){
				
				//初始化操作: 给按钮绑定事件
				//过滤出所有div中第一个元素
				$("#btn1").click(function(){
					$("div:first").css("background-color","palegreen");					
				});
				
				//过滤出所有div中偶数位的div
				$("#btn2").click(function(){
					$("div:even").css("background-color","palegreen");					
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","palegreen");					
				});
				$("#btn4").click(function(){
					$("div:gt(2)").css("background-color","palegreen");					
				});
			
			});
		</script>

• 表单过滤器： 以 冒号 : 开头 注意与基本过滤器用法的区别 冒号前面没有东西

• 对象属性过滤器：

           :selected     //下拉列表选中
  
           :checked     //复选框选中状态
  

• 其他选择器

              $("p.haha")    //表示<p></p>标签中含有 类名class="haha" 的
             
              $("ul li:first")   //表示无序列表中第一项元素
  
              $("ul li:last")   //表示无序列表中最后一项元素
  

js与jQuery的对象转换

js只能调用js里面的方法和属性
jq只能调用jq里面的方法和属性

$("#btn2").click()：表示给元素绑定事件
$("#btn2").click(function(){ }) ：表示给元素绑定事件的同时，添加了触发事件调用的函数
$$(“div1")：根据id获取的div元素是一个jquery的Object对象，使用get()方法才能得到javascript的元素(div)对象既$(“div1”).get()；

<script src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function checkOne() {
            var text = document.getElementById("div1");
            //text.innerHTML="我用js替换了你";
            //js对象转换成jquery对象
            $(text).html("我用js对象转换成jquery对象替换了你");
        }
        $(function () {
            //首先给元素绑定事件----1、先找到元素  2、绑定事件 3、并让事件触发函数
            $("#btn2").click(function () {
                //$("#div1").html("我用jquery替换了你");
                //jquery对象转换成js对象
                var aa = $("#div1").get(0);
                aa.innerHTML="我用jquery对象转换成js对象替换了你";
            });
        });
</script>
<input type="button" value="js替换内容" onclick="checkOne()">
<input type="button" value="jquery替换内容" id="btn2">
<div id="div1">
    哈哈哈，忘了吧!
</div>

jQuery的动画效果

1. show() 显示 hide() 隐藏 Toggle() 显示隐藏来回切换
2. fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 淡入淡出来回切换 fadeTo() 可以规定淡入淡出的透明度
3. slideDown() 向下滑动 slideUp() 向上滑动 slideToggle() 向上滑动向下滑动来回切换
4. animate() 自定义动画 $("#imga").animate({width:‘300px’,opacity:0.5},5000);

参数：slow：慢 fast：快 毫秒值

jQuery的淡入淡出

给div标签的三个盒子进行淡入淡出

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>

隐藏和显示

<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>