jQuery学习笔记2 2021-9-22

jQuery核心函数
$是jQuery核心函数 能完成jQuery的很多功能
$()就是调用的 $这个函数
1.当传入参数为函数时
表示当页面加载完成之后
相当于 window.οnlοad=function(){}

		window.onload=function () {
            alert("加载完成");
        }
        
        $(function () {
            alert("加载完成");
        })
        //以上两部分效果相同

2.传入参数为HTML字符串时
会帮我们创建HTML标签对象

//加载页面后 自动调用
        $(function () {
            $("<div>" +
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");
        })

传入参数为选择器字符串时

$("#id属性值")	id选择器 根据id查询对象
$("标签名")	标签名选择器
$(".class属性值")	类型选择器

传入参数为dom对象时
将dom对象转换为jQuery对象

		$(function () {
            var btnObj=document.getElementById("btnId");
            alert(btnObj);
            alert($(btnObj).length);
        })

jQuery对象和dom对象的区分
alert出来的效果不同
通过上面jQuery的api实现出来的的都是jQuery对象

jQuery对象的本质
jQuery对象是dom对象数组+jQuery中的一系列功能函数

jQuery和DOM对象使用区别
jQuery对象和DOM对象的属性和方法完全不同
例如
DOM对象有innerHTML方法 但是jQuery对象不能用
jQuery对象有click()DOM不能用

DOM对象和jQuery对象互转
1.dom转换为jQuery对象
（1）现有dom对象
（2）使用$(dom对象)就可以 转换为jQuery对象

		$(function () {
            var btn=document.getElementById("btnId");
            alert($(btn));
        })

2.jQuery转换为DOM对象
1.先有jQuery对象
2.jQuery对象[下标] 取出相应的DOM对象

		$(function () {
            var $btn=$("#btnId");
            alert($btn[0]);
        })

jQuery基础选择器
1.id选择器 $("#ID")
2.标签名选择器 $(“标签名”)
3.类型选择器 $(".class类型名")
4.全部选择器 $("*")
5.组合选择器 $(“div,span,p.myClass”)
//p.class表示标签名必须是p标签 同时class名必须是myClass
//组合选择器与页面的标签顺序有关 从上到下

//css()可以设置或获取样式
$("#btnId").css(“background-color”,“red”);