// 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";
});
});
jQuery初学
于 2021-09-05 21:11:55 首次发布