js 常用函数
程序员文章站
2022-04-25 11:07:53
...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/text.css" rel="stylesheet" />
</head>
<body>
<a class="submin">show</a>
<div id="str" class="ClassNameToBeRemoved" style="display: block;"> money div span em li canvas vide audio</div>
<div class="stringname" style="background: #f66456;padding: 5rem;display: none;">thttt</div>
<div class="title">
<ul>
<li>*</li>
<li>字符</li>
<li>数字</li>
</ul>
</div>
<div class="arrayl">
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
/*去掉空格返回字符串的长度*/
var str = $("#str").html();
var ss = str.replace(/\s/g,"");
document.write(ss.length+"返回字符串的长度</br>");
var indexo =ss.indexOf("li");
document.write(indexo+"返回li首次出现的位置</br>");
var srchref = ss.link("http://www.w3cschool.cc");
document.write(srchref+"增加链接</br>")
var mud = ss.match("li");
document.write(mud+"返回存在的字符串 不存在返回null</br>")
var query = ss.charAt(4);
document.write(query+"返回指定下标的字符串</br>")
var con = ss.concat("哈哈哈");
document.write(con+ " " +"两个字符串拼接</br>");
var sea =ss.search("li");
document.write(sea+"存在返回该字符串的下标，不存在返回-1</br>")
var sli = ss.slice(1,4);
document.write(sli+"截取并返回该字符串</br>")
$(document).ready(function(){
/* $(".submin").click(function(){
$("#str").toggle();切换隐藏
toggle(function(){},function(){});
单独的显示隐藏show(),hide();
获取到匹配的第一次点击执行第一个函数第二次点击执行第二个函数
})*/
/* $(".submin").click(function(){
$("#str").fadeToggle(1500);
单独的隐藏显示fadeOut() fadeIn()
缓慢隐藏与显示与toggle()函数的用法类似
})*/
/* $(".submin").click(function(){
$("#str").slideToggle(1500);
单独的 上下滑动隐藏显示slideDown(),slideUp()
上下滑动隐藏切换与fadeToggle()函数的用法类似
})*/
/* $(".submin").click(function(){
$(".stringname").animate({left:'250px', opacity:'0.5',height:'150px', width:'150px'},1500);
动画
});*/
/* $(".ClassNameToBeRemoved").click(function(){
$(".stringname").slideDown(5000);
向下滑动面板!
});
$(".submin").click(function(){
$(".stringname").stop();
停止向下滑动面板
});*/
/* text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。*/
/* $("#str").click(function(){
alert($("#stringname").attr("class"));
});*/
/* append() - 在被选元素值的结尾插入内容
prepend() - 在被选元素值的开头插入内容
after() - 在被选元素边框后面插入内容
before() - 在被选元素边框前面插入内容*/
/* $("#str").click(function(){
$("#stringname").append("<span>压缩</span>");
});
$("#str").click(function(){
$("#stringname").prepend("<span>德玛</span>");
});
$("#str").click(function(){
$("#stringname").after("<span>提莫</span>");
});
$("#str").click(function(){
$("#stringname").before("<span>光辉</span>");
});*/
/* remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素*/
/* $("#submin").click(function(){
$("#stringname").remove();
});*/
/* $("#submin").click(function(){
$("#stringname").empty();
});*/
});
//.append(i);在元素值后面追加
//queryarryl.find("a");返回queryarryl下所有子元素为a的；
//on()添加事件；
//index(this);返回当前元素的下标
//queryi.eq(index).removeClass("active").hide();根据index返回的下标删除class样式并隐藏
$(function(){
var queryarryl = $(".arrayl");
var querya = queryarryl.find("a");
var queryem = querya.find("em");
var queryi = querya.find("i");
queryi.hide();
queryem.on('click',function(){
var index = queryem.index(this);
if(queryi.hasClass("active")){
queryi.eq(index).removeClass("active").hide();
}else{
queryi.eq(index).addClass("active").show().append("qq");
}
});
var querytitle=$(".title");
var titleli = querytitle.find("li")
titleli.on('click',function(){
var index = titleli.index(this);
queryarryl.hide();
titleli.removeClass("active")
titleli.eq(index).addClass("active");
queryarryl.eq(index).show();
});
})
//input改变就执行事件实时监听
<body>
<div class="imges">
<ul>
<input type="text" id="idName"/>
</ul>
</div>
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("#idName").on("input propertychange",function(){
alert("改变了");
})
});
/*jquery拼接html语句的时候需要绑定事件在拼接的语句里面不能添加行内绑定事件会无法点击这个时候可以用这种获取父类的div在或去行内的id*/
$("#sureWin").on("click","#sectionid",function(){
$("#section").hide();
})
/*后续添加中*/
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/text.css" rel="stylesheet" />
</head>
<body>
<a class="submin">show</a>
<div id="str" class="ClassNameToBeRemoved" style="display: block;"> money div span em li canvas vide audio</div>
<div class="stringname" style="background: #f66456;padding: 5rem;display: none;">thttt</div>
<div class="title">
<ul>
<li>*</li>
<li>字符</li>
<li>数字</li>
</ul>
</div>
<div class="arrayl">
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
<a class="a">
<em class="hasem">123</em>
<i>456</i>
</a>
</div>
<script src="js/jquery.min.js"></script>
<script>
/*去掉空格返回字符串的长度*/
var str = $("#str").html();
var ss = str.replace(/\s/g,"");
document.write(ss.length+"返回字符串的长度</br>");
var indexo =ss.indexOf("li");
document.write(indexo+"返回li首次出现的位置</br>");
var srchref = ss.link("http://www.w3cschool.cc");
document.write(srchref+"增加链接</br>")
var mud = ss.match("li");
document.write(mud+"返回存在的字符串 不存在返回null</br>")
var query = ss.charAt(4);
document.write(query+"返回指定下标的字符串</br>")
var con = ss.concat("哈哈哈");
document.write(con+ " " +"两个字符串拼接</br>");
var sea =ss.search("li");
document.write(sea+"存在返回该字符串的下标，不存在返回-1</br>")
var sli = ss.slice(1,4);
document.write(sli+"截取并返回该字符串</br>")
$(document).ready(function(){
/* $(".submin").click(function(){
$("#str").toggle();切换隐藏
toggle(function(){},function(){});
单独的显示隐藏show(),hide();
获取到匹配的第一次点击执行第一个函数第二次点击执行第二个函数
})*/
/* $(".submin").click(function(){
$("#str").fadeToggle(1500);
单独的隐藏显示fadeOut() fadeIn()
缓慢隐藏与显示与toggle()函数的用法类似
})*/
/* $(".submin").click(function(){
$("#str").slideToggle(1500);
单独的 上下滑动隐藏显示slideDown(),slideUp()
上下滑动隐藏切换与fadeToggle()函数的用法类似
})*/
/* $(".submin").click(function(){
$(".stringname").animate({left:'250px', opacity:'0.5',height:'150px', width:'150px'},1500);
动画
});*/
/* $(".ClassNameToBeRemoved").click(function(){
$(".stringname").slideDown(5000);
向下滑动面板!
});
$(".submin").click(function(){
$(".stringname").stop();
停止向下滑动面板
});*/
/* text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。*/
/* $("#str").click(function(){
alert($("#stringname").attr("class"));
});*/
/* append() - 在被选元素值的结尾插入内容
prepend() - 在被选元素值的开头插入内容
after() - 在被选元素边框后面插入内容
before() - 在被选元素边框前面插入内容*/
/* $("#str").click(function(){
$("#stringname").append("<span>压缩</span>");
});
$("#str").click(function(){
$("#stringname").prepend("<span>德玛</span>");
});
$("#str").click(function(){
$("#stringname").after("<span>提莫</span>");
});
$("#str").click(function(){
$("#stringname").before("<span>光辉</span>");
});*/
/* remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素*/
/* $("#submin").click(function(){
$("#stringname").remove();
});*/
/* $("#submin").click(function(){
$("#stringname").empty();
});*/
});
//.append(i);在元素值后面追加
//queryarryl.find("a");返回queryarryl下所有子元素为a的；
//on()添加事件；
//index(this);返回当前元素的下标
//queryi.eq(index).removeClass("active").hide();根据index返回的下标删除class样式并隐藏
$(function(){
var queryarryl = $(".arrayl");
var querya = queryarryl.find("a");
var queryem = querya.find("em");
var queryi = querya.find("i");
queryi.hide();
queryem.on('click',function(){
var index = queryem.index(this);
if(queryi.hasClass("active")){
queryi.eq(index).removeClass("active").hide();
}else{
queryi.eq(index).addClass("active").show().append("qq");
}
});
var querytitle=$(".title");
var titleli = querytitle.find("li")
titleli.on('click',function(){
var index = titleli.index(this);
queryarryl.hide();
titleli.removeClass("active")
titleli.eq(index).addClass("active");
queryarryl.eq(index).show();
});
})
//input改变就执行事件实时监听
<body>
<div class="imges">
<ul>
<input type="text" id="idName"/>
</ul>
</div>
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("#idName").on("input propertychange",function(){
alert("改变了");
})
});
/*jquery拼接html语句的时候需要绑定事件在拼接的语句里面不能添加行内绑定事件会无法点击这个时候可以用这种获取父类的div在或去行内的id*/
$("#sureWin").on("click","#sectionid",function(){
$("#section").hide();
})
/*后续添加中*/
</script>
</body>
</html>