jQuery初学

// jQuery语法
$(document).ready(function() {}); //文档加载完成后执行函数

// 为 $ 修改名字
var JQ = jQuery.noConflict();

// jQuery选择器
$(".className") 类选择器
$("#Tagname") 元素选择器

也可以先获取dom对象
var p1 = document.getElementsByClassName("p1")[0];
$(p1)


// 效果
var JQ = jQuery.noConflict();
JQ(document).ready(function() {
		//绑定事件
        JQ(".p1").mousemove(function() {
                JQ(this).show(0); // 展示对象
                JQ(this).hide(0); // 隐藏对象
                JQ(this).slideDown(250); // 向下滑动展示对象
                JQ(this).slideUp(250); // 向上隐藏对象
                // 中间的数值表示显示的快慢,也可以用 "slow","fast",···
        });
    }
});

// 修改css样式
var JQ = jQuery.noConflict();
JQ(document).ready(function() {
		// 修改单个样式
		JQ(".p1").mousemove(function() {
        		JQ("this").css("color","red");
    	});
    	// 修改多个样式
    	JQ(".p1").mousemove(function() {
        		JQ("this").css({"color"："red"，
        		"font-size":"12px",
        		"font-weight":"300"
        		});
    	});
});

// 修改图标的颜色

JQ(document).ready(function() {
    JQ(".p1").mousemove(function() {
		// 运用filter滤镜
        JQ("this").css("filter", "invert(49%) sepia(32%) saturate(5527%) hue-rotate(359deg) brightness(100%) contrast(106%)");
    });
});

// 滤镜色值变化的网站：https://www.zhangxinxu.com/sp/filter.html

// jQuery修改dom属性
JQ(document).ready(function() {
    JQ(".p1").click(function() {
        JQ("this").get(0).innerHTML="Hello World";
    });
});