jQuery知识点整理1

jQuery是什么？

jquery其实就是别人封装好的一个外部js库
jquery是一个快速、小型切功能丰富的JavaScript库。它使用一个在多种浏览器上工作的易于使用的API，使得HTML文档遍历和操作、时间处理、动画和Ajax等工作变得更加简单。随着功能性和可扩展性的结合，jquery改变了数百万人编写JavaScript的方式

jQuery版本介绍

不同的版本

        jquery  1.x  已经不更新了    支持老浏览器  包括IE6  IE8  opera老的版本
        jquery  2.x  已经不更新了    不支持以前的老浏览器 
        jquery  3.x  正在更新中      不支持老浏览器

** 每个版本有压缩版和未压缩版**
压缩版的 适用于生产环境 实际开发过程
未压缩版 适用于开发测试

jQuery的入口函数

1.入口函数的第一种写法

        $(document).ready(function(){
            console.log("我是第一种写法的入口函数");
        })

2.第二种写法的入口函数 这种写法是简化版 以后使用的比较多

        $(function(){
            console.log("我是第二种写法的入口函数")
        })

3.jquery的入口函数与原生的入口的区别

• 原生js的入口函数只能写一个 如果写了多个 后面的就会覆盖前面的
  jquery的入口函数可以写多个
• 执行时机
  • 原生js入口函数 是需要等待页面上所有的资源都加载完毕（内部外部 CSS JS 图片等）都加载完毕后
  • jquery的入口函数 只需要页面的dom树加载完毕就可以执行

设置文本的方法

1. 获取这个div的文本
   可以获取到元素自身的文本 也可以获取到后代元素中的文本

	<div class="div1" id="box">我是一个div盒子
	        <p>我是p标签
	            <span>我是span标签</span>
	        </p>
	 </div>

    <script src="./jquery-1.12.4.min.js"></script>
    <script>
    	$(function(){
			var text = $(".div1").text()
    		console.log(text);
    		
    		// 获取全部的文本
			console.log($("div").text) // jquery里面封装了迭代的方法  隐式迭代
		})
    	
    </script>

2. 设置文本
   只需要给text（参数） 加了参数后 就给元素设置文本
   会覆盖元素原本的文本 包括子元素
   如果新设置的文本中包括了标签 那么他是不会解析标签的 当做文本内容解析

	<script src="./jquery-1.12.4.min.js"></script>
    <script>
    	$(function(){
			$("#box").text("<a>我是新设置的text</a>")
		})
    	
    </script>

设置获取样式的方法

1.$(“元素名称”).css(’ name’) 获取第一个匹配元素的样式属性。

	<div class="div1" style=" height: 200px;background-color: plum;border: 5px solid pink;"></div>

	<script src="./jquery-1.12.4.min.js"></script>
    <script>
    	$(function(){
			console.log($(".div1").css("height")); //200px
			console.log($(".div1").css("background-color")); //rgb(221, 160, 221)
			 console.log($(".div1").css("border")); //5px solid rgb(255, 192, 203)
			 
			 // 在所有IE浏览器中 获取样式 都要写准确的样式 例如获取上边框的宽度和颜色
			 console.log($(".div1").css("border-top-width ")); //5px solid rgb(255,255,0)
			 console.log($(".div1").css("border-top-color ")); //5px solid rgb(255,255,0)
		})
    	
    </script>

2.$(“元素名称”).css(’ name’，‘value’) 设置样式属性
使用css方法设置单样式

	<script src="./jquery-1.12.4.min.js"></script>
    <script>
    	$(function(){
			$(".div1").css("width",300)
			$(".div1").css("backgroundColor","yellow");
			$(".div1").css("border","5px solid black");
		})

3.以对象的形式写多种样式

	<script src="./jquery-1.12.4.min.js"></script>
    <script>
    	$(function(){
			$(".div1").css({
                    width : "300px",
                    "height" : 300,
                    // background-color : "red" // 如果属性名不用引号引起来 那么带-就一定要换成驼峰命名法
                    "background-color" : "red",
                    backgroundColor : "green",
                    border : "10px solid gold"
                    
                })
		})