//1.css操作
//a.css() 操作样式的，获取的内嵌和行内， 设置的样式都是在行内。
//b.class操作。
//addClass("one two")
//removeClass("one");
//hasClass();
//toggleClass();
//2.jQuery动画
//2.1基本动画
//a.show(); hide(); toggle();
//如果没有写参数，就没有动画效果； 参数可以是毫秒数，也可以是对应的字符串 "fast" "normal" "slow"
//第二个参数是 动画执行完毕之后的回调函数。
//b.slideDown(); slideUp();
//参数可以是毫秒数，也可以是对应的字符串 "fast" "normal" "slow"
//第二个参数是 动画执行完毕之后的回调函数。
//c.fadeIn(); fadeOut();
//参数可以是毫秒数，也可以是对应的字符串 "fast" "normal" "slow"
//第二个参数是 动画执行完毕之后的回调函数。
//2.2自定义动画
//animate()
//第一个参数：对象 ，要发生动画的样式
//第二个参数：做动画的时间
//第三个参数：匀速啊还是非匀速啊 "linear" "swing"
//第四个参数：动画执行完毕之后的回调函数。
//给div1设置动画.
// $('#div1').animate({
// left:800,
// width:200,
// height:200
// },2000,'linear', function () {
// alert('动画执行完了');
// });
//2.3 stop的含义
//动画的队列
//stop(); //有两个参数，是布尔类型的值
//第一个参数：是否清空动画队列
//第二个参数：是否执行到当前动画的最终位置
//$('div').stop(true,true);
//3.动态创建元素
//a. $('<a href="#">新闻</a>');
//b. html('我是内容<a href="#">新闻</a>');
//4.添加节点 5种
//append();
//prepend();
//after();
//before();
//appendTo();
//5.移除节点
//html(""); //不用，会泄漏内存
//empty();
//remove();//自杀
//6.克隆节点
//clone(); //参数默认是false
//参数：不管是true还是false，克隆的节点的内容都是会被克隆的。
//参数是false，不会克隆事件，， 参数是true的话，会把事件也一起克隆来。
//7.val()获取/设置表单内容
//val();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
/*
1.属性操作 attr
原生:setAttribute getAttribute removeAttribute
//获取属性
//1.获取属性. attr('属性名');
$('#btn1').on('click', function () {
//1.1 获取img标签的属性.
console.log($('img').attr('src')); //'991.gif'
console.log($('img').attr('title')); //'周五晚睡'
console.log($('img').attr('aaa')); //'aaa1'
console.log($('img').attr('bbb')); //'如果设置上了bbb属性,就获取对应的值; 如果没有设置上这个属性,就返回undefined'
});
attr("title");
//设置属性
//设置单属性
attr("title","哈哈");
//设置多属性
attr({
});
//移出属性
removeAttr("属性名");
2.布尔值类型的属性 prop
//需求:选中多选框点击按钮看看这个多选框的checked是不是true? 没有选中多选框点击按钮看看多选框的checked是不是false.
$('#btn1').on('click', function () {
// console.log($('#ckb1').attr('checked')); //undefined. 为什么值是undefined?
//原因是:在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
disableed checked selected
prop("checked",false);
3.设置获取元素的宽高
内容宽高： .width(); .height();
内容宽高+padding： innerWidth();
内容宽高+padding+border: outerWidth();
内容宽高+padding+border+margin:outerWidth(true);
// 获取可视区宽度
$(window).width();
// 获取可视区高度
$(window).height();
4.offset();
元素距离文档的位置。
获取的是一个对象，里面包含了left值和top值。
设置offset的时候，如果元素没有设置定位，会自动的帮这个元素设置一个relative的定位。
5. position()
距离自己的定位父级的距离。
6.scrollTop() scrollLeft()
获取的是滚出去的距离。
//获取的是页面的滚出去的距离。
$(window).scrollTop();
$(window).scrollLeft();
7.jQuery
简单注册事件-bind()-delegate-on
8.on注册事件
//2个参数，简单注册
$(元素).on('事件名',事件处理程序，给一个匿名函数);
$('div').on('click',function(){});
//3个参数，就是委托注册
//支持动态注册
$(父元素).on('事件名','触发事件的元素',事件处理程序);
$('div#one').on('click','p',function(){});
9.解绑事件
$(元素).off(); //没有参数，解绑所有的事件
$(元素).off('click'); //没有参数，解绑对应的事件
10.事件触发
.trigger();
//代码来触发这个事件.
//触发自定义事件.
11.事件对象
jQuery中的事件对象就是原生js中的事件对象的一个封装,为你做好了兼容处理.
可以用事件参数e来获取这个事件对象
3个坐标：
screenX screenY
clientX clientY
pageX pageY
e.stopPropagation();
e.preventDefalut;
return false;
e.target
this
keyCode
*/
</script>
</head>
<body>
<div>
<p></p>
<span></span>
</div>
</body>
</html>
来源：https://blog.csdn.net/weixin_43775626/article/details/100826079