<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery复习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<style>
.d {
background-color: black;
}
</style>
<button onclick="alert(1)"></button>
<script>
/*
*第一章 认识jquery
*/
//简写
$(function(){
alert(1);
})
//注释
// /**/
//解决jquery冲突
$jq = jQuery.noConflict();
$jq(function(){
alert('解决冲突')
})
document.write('第一个转出');
/*
*第二章 jquery选择器
*/
// css选择器
// jq选择器
// css选择器
标签选择器 td{} html标签
id选择器 #not{} id="not"
class选择器 div. note{} class="note"
群组选择器 td,p,div,a{}
后代选择器 #links a{}
通配符选择器 * {}
// 基本选择器
// 层次选择器
// 过滤选择器
// 表单选择器
// 基本选择器
$("#id") //id=""
$(".id") //class=""
$("p") //html标签
$("*") //所有
$("div") //div
$(function(){
$('.bo').css('background-color','red');
$('.class')
$('p')
$('*')
$('div')
})
// 层次选择器
层次选择器 所有 >下的 +下的同辈 ~后的所有同辈
$("div span") 选取DIV里的所有SPAN div里的所有 选取DIV里的所有span
$("div > span") 选取DIV下的子元素 div下子元素span 选择DIV下的名为span的子元素
$(".prev + next") $("#a + div") 选取class为.prev的下一个同辈元素 选择class为 one 的下一个span
$(".prev ~ span") 选取class为.prev后的所有同辈元素 选择prev 后的所有span
$(function(){
siblings(); //前后所有的同辈元素．
})
$(function(){
$('div p') 所有
$('div > p') 下的子
$("div + p") 下的同辈
$("div ~ p") 后的同辈
})
// 过滤选择器
基本过滤选择器
$("div:first") 第一个
$("div:last") 最后一个
$("div:not(.one)") 非.one的
$("div:even") 2 为偶数的
$("div:odd") 1 为奇数的
$("div:eq(3)") 索引为3的
$("div:gt(3)") 索引大于3的
$("div:lt(3)") 索引小于3的
$(":header") 选取所有标题元素
$(":animated") 选取所有正在执行动画的元素
$(":focus") 选取焦点的所有元素
内容过滤选择器
$("div:contains(di)") 选取div 含有文本di的元素
$("div:empty") 选取空元素
$("div:has('.mini')") 选取含有.mimi的div元素
$("div:parent") 选取拥有子元素的元素
可见性过滤器
$("div:hidden") 选取所有不可见元素
$("div:visible") 选取所有可见元素
属性选择器
$("div[title]") 属性含有title
$("div[title=test]") 属性等于test
$("div[title!=test]") 属性不等于test
$("div[title^=te]") 属性以te开头的
$("div[title$=es]") 属性以es结束的
$("div[title*=es]") 属性含有es的
$("div[id][title*=es]") 属性含有id的div 结果中选取属性title值含 有es的
$("div[title='en']") 属性 title = en的
$("div[title*='en']") 属性 title 含有en的
$("div[title|='en']") 属性 title 等于en 或以en为前缀的
$("div[title～＝'uk']") 属性title 以空格分隔的等于uk的
子元素过滤选择器
$("div.one :nth-child(2)") .one父下的第二个子元素
$("div.one :first-child") .one父下的第一个子元素
$("div.one :last-child") .one父下的最后一个子元素
$("div.one :only-child") .one父下的唯一个子元素
表单对象属性过滤选择器
hidden隐藏 visible可见 enabled可用 disabled不可用
$(".form1 :text")
$(".form1 :password")
$(".form1 :radio")
$(".form1 :checkbox")
$(".form1 :submit")
$(".form1 :images")
$(".form1 :reset")
$(".form1 :button")
$(".form1 :file")
$(".form1 :select")
$(".form1 :file")
$(".form1 :hidden")
$(".form1 select");
$(".form1 textarea")
$(".form1 input:enabled") 可用
$(".form1 input:disabled") 不可用
$(":checkbox") 操作多选框
$("select :selected")
/*
*第二章 jQuery中的DOM操作
*/
// DOM操作的分类
// jQuery中的DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
设置和获取HTML,文本,值
遍历节点
CSS-DOM操作
查找节点
$li.text(); 查找元素节点
$li.attr("title"); 查找属性节点
创建节点
$li.append($li_1); 创建元素节点
$("ul").append($li_2); 创建文本节点
$("ul").append($li_3); 创建属性节点
插入节点
append(); 追加
appendTo(); 追加指定位置
prepend(); 前置
prependTo(); 前置指定位置
after(); 之后插入
insertAfter() 之后插入指定位置
删除节点
remove(); 删除节点
detach(); 不删除去掉所有元素
empty(); 清空元素里的内容
复制节点
clone();
替换节点
replaceWith();
replaceAll();
包裹节点
wrap(); 单独包
wrapAll(); 所有包
wrapInner()
==属性操作==
获取属性和设置属性
attr("title"); 获取属性
attr({"name" : "title","title" : "name"}); 设置属性
删除属性
removeAttr("title");
==样式操作==
获取样式和设置样式
attr("class"); 获取class 样式
attr("class","high"); 设置class 样式为 high
追加样式
addClass("another"); 追加 another 样式
移除样式
removeClass("high"); 移除 high 的样式
切换样式
toggleClass(
function(){//显示},function(){//隐藏}
);
判断是否含有某个样式
hasclass("high"); 判断是否含有某个样式
==设置或获取HTML html 文本 值 的操作==
html(); 获取html
text(); 获取文本
val(); 获取值
css(); 获取css
==遍历节点 遍历的操作==
children(); 获取子元素集合
next(); 获取后紧邻同辈
prev(); 获取前紧邻同辈
siblings() 获取前后紧邻同辈
closest() 最近的匹配元素
parent(); 获取父元素
parents(); 获取父元素的祖先
==CSS DOM的操作==
$("p").css('background-color', 'red');
$("p").height(); 获取高度
$("p").height(100); 设置高度
$("p").width();
$("p").width(100);
offset(); 当前视窗的相对偏移 var offset = $("p").offset(); offset.left; offset.right;
position(); 相对最近元素的偏移 var position= $("p").position(); position.top; position.left;
scrollTop(); 滚动条距顶端的距离
scrollLeft(); 滚动条距左侧的距离
$('#id').mouseover(function(e){
e.pageX;
e.pageY
}).mouseout(function(e){
e.pageX;
e.pageY
});
事件与动画
bind(); 可以简写绑定事件
$("#id").mousemove(function(){
//可以直接绑定事件。简写bind的绑定。
});
hover(); 光标悬停
toggle(); 鼠标连续单击
unbind(); One(); 移除事件
click();
show(); 显示
hide(); 隐藏
fadeIn(); 加大不透明
fadeOut(); 减小不透明
slideUp(); 由下到上减小高度
slideDown(); 由上到下延伸高度
animate(样式值，速度，函数); 自定义动画
stop(); 停止动画
delay(); 函数延时执行
toggle(); 切换可见
slideToggle(); 高度变化切换
fadeTo(); 不透明渐进
fadeToggle(); 不透明与透明切换
jq的事件冒泡
$('#id').mouseover(function(e){
e.pageX;
e.pageY
}).mouseout(function(e){
e.pageX;
e.pageY
});
$('#id').mouseover(function(e){ e事件对象
e.type //事件类型
e.stopPropagation();
e.preventDefault();
e.target; //获取触发事件的元素
e.relatedTarget; //获取事件对象 可以访问到事件对象中的元素
e.pageX; //X坐标
e.pageY; //y坐标
e.which; //获取鼠标的左中右键
e.metaKey; //获取键盘键
})
e 事件对象
e.stopPropagation(); 停止事件冒泡
e.preventDefault(); 阻止默认行为
事件冒泡： 从里向外冒泡
事件捕获： 从外向里捕获
========================================================================================
div鼠标的选取:
mouseover(function (){ }); 悬停事件
hover(function (){ }, function (){ }); 悬停切换事件
click(); 单击
toggle(); 单击切换事件
div层的尺寸
width();
height();
css(""); css({"width":40px; });
div层的显示与隐藏
hide();
show();
toggle(); 切换
滑动效果的实现
slideUp(4000,function (){});
slideDown(4000,function (){});
slideToggle(); 切换高度变化
fadeIn();
fadeOut();
fadeTo(); 淡入淡出切换
</script>
</body>
</html>