学习js jq 总是会忘记,20230405重温习。

<!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>

发表评论