侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

操作

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 44 阅读 / 4,524 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / JS / 操作
$() 一只都死一个数组
is用法,next()用法
if($(".cur").is("div:last")){
$(".cur").removeClass("cur");
$("div:first").addClass("cur");
}else{
$(".cur").removeClass("cur").next().addClass("cur");//添加类选择器
}
onload 和 ready
互转
$(DOM对象)      就是jQuery对象
$ ("#txtName")[0] 就是DOM对象
事件
鼠标
click
mouseover  进入绑定元素的子元素时也会触发。
mouseout
mouseenter 进入绑定元素的子元素时不会触发。
mouseleave
hover
$(":visible").hover(function (){
$(this).css("border","1px solid pink")
},
function(){
$(this).css("border","0px");
})
$(":visible").mouseover(function (){
$(this).css("border","1px solid pink")
})
$(":visible").mouseout(function (){
$(this).css("border","0px");
})
$(":visible").mouseenter(function (){
$(this).css("border","1px solid pink")
})
$(":visible").mouseleave(function (){
$(this).css("border","0px");
})
$(function () { //鼠标下的元素(去掉父元素)加边框
var old;
$(":visible").hover( //TODO 添加属性 而不是添加类。 把属性存下来,之后再复原。
function () {
if ($(this).find("[bordering='true']").length == 0 && $(this)[0].tagName != "HTML") {
old = $(this).css("border");
$(this).css("border", "1px solid pink").attr("bordering", "true");
}
},
function () {
$(this).css("border", old).attr("bordering", null);
})
});
键盘
keydown  按键按下触发  若按键长按则连续触发  alt 和 ctrl 也会触发
keyup   按键抬起触发
keypress 按键按下触发   若按键长按则连续触发  alt 和 ctrl 不会触发
监听组合按键
document.onkeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
//if (ctrlKey && e.key=='s') { //不知道会不会有兼容问题
if (ctrlKey && keyCode == 83) {
alert('save');
}
e.preventDefault();
return false; //这一句会阻止浏览器获取按键。 就是浏览器的按键会失效, 但系统的不会失效
}
$(document).keydown(function (event) {
if (event.keyCode == "13") {
alert("确认要提交么?");
}
});
focus
blur
绑定事件
可以绑定多个事件,即使是同一个类型的事件。
$("input[name=event_1]").on({
mouseover: function () {
$("ul").css("display", "none");
},
mouseout: function () {
$("ul").css("display", "block");
}
});
把on换成bind也行,不过不推荐
解绑
bind用unbind解绑
on 用off 解绑
$("div:first").off(); 解绑全部所有
$("div:first").off("mouseover"); 解绑所有这个类型的事件
$("div:first").off("mouseover",fun); 解绑这个事件,就是用这个函数绑定的事件,这个函数是一个变量。
$("#myaccound").hover(
function(){ //execute when curse in
$("#menu_1").css("display","block");
},
function(){ //execute when curse out
$("#menu_1").css("display","none");
}
);
$("body").toggle( //多次点击轮流call里面的函数
function () { },
function () { },
function () { }
);
$("li:gt(5):not(:last)").toggle();  切换可见状态
动画
show
hidden
fadein
fadeout
slideup
slidedown
attr()
css()
css(name,value)
css({name:value, name:value,name:value…})
后面不带值就是读取值
addClass()
addClass(“class1 class2 … classN”)
toggleClass()
节点操作
读写节点
val()  针对input标签
document.write()  这个方法只有document有element.innerText=""$("p").html("Hello");//全部替换$("p").append("world")
创建节点元素
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点   $(“<li title=‘标题为千与千寻’>千与千寻</li>”)
内部插入
元素外部插入同辈节点
替换
$(A).replaceWith(B)  把A用B替换掉
$(A).replaceAll(B)  把A用来替换掉所有的B
复制粘贴
$("ul li:eq(1)").clone(true).appendTo("ul");
所以区别就是detach删除再添加回去事件还在。(删除之后再在同样位置添加同样标签事件会不会生效???)
isNAN
是不是非数字 is not a number?
confirm
<script type="text/javascript">
var flag=confirm("确认要删除此条信息吗?");
if(flag==true)
alert("删除成功!");
else
alert("你取消了删除");
</script>
window.open("adv.html",""," height=380,width=320,toolbar=0,scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");
跳转
history.back()    =  history.go(-1)
history.forward()  =  history.go(1)
window.history.back();
window.history.forward();
window.location.href
"https://www.baidu.com/?tn=02049043_8_pg&ch=2"
window.location.host
"www.baidu.com"
window.location.hostname
"www.baidu.com"
reload()
replace()
refer 是网页来源
跳转方法
document.location.href="https://www.baidu.com/?tn=02049043_8_pg&ch=2" //必须带http
document.location.replace("https://www.baidu.com/?tn=02049043_8_pg&ch=2") //必须带http
window.location = "http://www.baidu.com";
定时
setTimeout("javascript:location.href='login.html'",5000);   clearTimeout(返回的id)
setInterval("disptime() ", 1000 ) 每间隔1秒执行一次        clearInterval(返回的id)
复选框的checked属性
Date
var today=new Date(); //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");
0

评论区