jq是什么?
1.jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。
2.jq的优点:简单，粗暴 没有兼容性问题
3.版本:国内主要使用1.0+版本
jq的使用
引入jq的方法:
1.下载到本地js
2.引入网络的js文件
使用jq的方法:
入口函数:1.
$(function(){})
2.
$(document).ready(function(){
?
})
?jq的选择器
基本选择器 :标签 类 id选择器 交集 并集
直接双引号里加入 操作css样式的方法
$("div");//标签
$(".class");//类
$("#id")//ID
$("div.class");//交集
$(".class,.class1")//并集层级选择器： 子代 后代
类同css 子代后代选择器
$("#id div");//后代
$("#id>div");//子代过滤选择器：
添加到双引号 里面的选择器后面
$(".class:odd");//选择偶数
$(".class:even");//选择奇数
$(".class:first");//第一个
$(".class:last");//最后一个
$(".class:cheched");//选中的元素筛选选择器:
添加到选择器后面
$("#id").children(); //找儿子
$("#id").find(); //找后代
$("#id").parent(); //找爹
$("#id").silblings(); //找兄弟，不包括自己
$("#id").next(); //下一个兄弟
$("#id").prev(); //上一次兄弟
$("#id").eq(); //指定下标
$("#id").index(); //返回的当前元素在所有兄弟里面的索引jq对象与js对象
区别:
1.js对象不能调用jq的方法
2.jq对象包含js对象(理解为jq封装js对象)
互相转换:
js>jq:
$(js对象);
jq>js:
jq对象[0];//
jq对象.get(0)
jq操作CSS:
设置单个样式:
$("li")
?.css("backgroundColor", "pink")
?.css("color", "red")
?.css("fontSize", "32px");
?设置多个样式:
$("li").css({
backgroundColor:"pink",
color: "red",
fontSize:"32px",
border: "1px solid black"
?});
?获取样式:
$("#id").css(name);
操作Class
直接添加类名
添加
$("div").addClass("class")去除
$("div").removeClass("class")判断
$("div").toggleClass("class")
属性操作
用法和css一样 1.设置单个属性
attr(name, value)
$("img").attr("alt", "图破了");
$("img").attr("title", "错错错错");
2.设置多个属性
$("img").attr({
?alt:"图破了",
?title:"错错错",
?aa:"bb"
})3.获取属性
$("img").attr(name);
动画 animate()
animate(设置属性,速度,效果,回调函数)
属性是必须的元素
效果:
linear--线性
swing--秋千
速度:
毫秒 字符串(fast,normal,slow)
$("div").animate({left:800})
?.animate({top:400})
?.animate({width:300,height:300})
?.animate({top:0})
?.animate({left:0})
?.animate({width:100,height:100})
?})
?基本的动画效果:
show();显示 ?hide();隐藏
slideDown(); 滑出 slideUp();滑入 slideToggle();滑入滑出
fadeIn();淡入 fadeOut();淡出 fadeToggle();淡入淡出
###停止动画:
stop(); 停止当前执行的动画,有两个参数为布尔值
节点操作:
1.添加节点
append();//添加内容后面
prepend();//添加内容前面
before();//添加到标签前面
after();//添加到标签后面
括号里加入html代码,
2.清除节点
html();//有内存泄漏问题
empty();//清空节点
remove()//移除节点
3.复制节点 ?clone()//可以传入参数
(true:复制事件,false:不复制事件)都是深复制
原文地址 ：https:xuanjidd.xyz
jQuery基础
原文地址：https://www.cnblogs.com/xuanjidd/p/9654975.html