分类：N10_前端
1）Jquery元素追加和删除
常用方法
1.查找元素节点
var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);
2.查找元素属性
利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。
当参数是一个时，则是要查询的属性名称。
当参数是两个时，则可以设置属性的值。
alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数
$(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数
3.添加元素节点
$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有html代码都放到$()工厂里面就行了！
例：
var $htmlLi = $("<li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul"); //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
$ul.hmtl();//替换内容
4.删除元素节点
由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();
4.1 remove()方法
$(“p”).remove();// 我们可以获取到要删除的元素，然后调用remove()方法
$(“ul li:eq(0)”).remove().appendTo(“ul”);// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用
$(“ul li”).remove(“li[title!=ABC]“);//remove可以接受通过参数来选择性的删除符合条件的元素;
4.2 empty()方法
严格来讲，empty()方法并不是删除元素，而是清空
例：
HTML代码
<ul>
<li title="AAA">AAA</li>
</ul>
JQuery代码
$("ul li:eq(0)").empty();
结果
<ul>
<li title="AAA"></li>
</ul>
2）获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
3）输入文本自动跳转
function T1_onkeyup() {
if(document.card.T1.value.length==4){
document.card.T2.focus();
}
}
4）JS提交表单 //注意点，用Javascript提交表单时最好form里的元素不要用id="submit"或name="submit"
function validate(){
document.getElementByIdx_x('myform').submit();
}
5）val() input 设置或者获得值
//设置值
$("button").click(function(){
$(":text").val("Hello World");
});
//获得值
$("button").click(function(){
$(":text").val();
});
6）live() 方法为被选元素附加一个或多个事件处理程序
//可以用on()方法代替
$("button").live("click",function(){
$("p").slideToggle();
});
7）blur() 失去焦点时触发
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
8）find() 方法，查找后代的元素
$("p").find("span").css('color','red');
9）jquery 选择器 如何选择索引值在一定范围之间的元素
$(table tr td:lt(5):gt(1)) //选取大于1，小于5的
10）select的选定后激发事件。用change()方法
$('#day').change(function () {
//选择后执行这里的语句
});
$(function(){
$('#type_id').change(function(){
$("#consultation01-r").hide();
var vals=$('#type_id').val();
if(vals==0){
$("#consultation01-r").show();
}
});
})
11）触发 input 元素的 select 事件：选中input框中的内容
$("button").click(function(){
$("input").trigger("select");
});
12）
弹出对话框: alert(),prompt(),confirm()
获得输入焦点 focus()
<!-- prompt()的使用 第二个参数为默认值-->
function disp_prompt()
{
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="")
{
document.write("你好，" + name + "！今天过得好吗？")
}
}
<input type="button" onclick="disp_prompt()" value="显示一个提示框" />
<!-- confirm()的使用 点击确认返回true，否则为false -->
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
// <input type="button" onclick="show_confirm()" value="Show a confirm box" />
function setFocus()
{
document.getElementById('password1').focus() //获得焦点
}
function loseFocus()
{
document.getElementById('password1').blur() //失去焦点
}
// <input type="password" id="password1" value="thgrt456" />
// <input type="button" onclick="setFocus()" value="Set focus" />
// <input type="button" onclick="loseFocus()" value="Lose focus" />
13）JS的转向函数是?怎么引入一个外部JS文件?
window.location.href
// <script type="text/javascript" src="js/js_function.js"></script>
14)多国语言的切换
/*
<div>
<p>简体中文</p>
<div style="display: none;">
<p data-v='cn'>简体中文</p>
<p data-v='Traditional'>中文繁体</p>
<p data-v='English'>English</p>
<p data-v='Russia'>Russia</p>
<p data-v='Deut'>Germany</p>
<p data-v='Spanish'>Spanish</p>
<p data-v='Japan'>Japan</p>
<p data-v='Korea'>Korea</p>
<p data-v='Portuguese'>Portuguese</p>
</div>
*/
$(function(){
$(".lag > p").click(function(){
$(".lag .ul").toggle();
});
$(".lag .ul p").click(function(){
$(".lag .ul").hide();
loadUrl('/login/?lang='+$(this).attr('data-v'));
});
var lang='<?=$_GET["lang"]?>';
if(lang){
$(".lag .ul p").each(function(){
if($(this).attr('data-v')==lang)
{
var text=$(this).html();
$(".lag > p").html(text);
}
})
}
})
15)jQuery改图片的背景图片
//改背景图
$(".haader-t-r-t").mouseleave(function(){
$(".haader-t-r-b").fadeOut(400);
$(this).css('color','#999');
$(this).css('background','url(./Themes/Home/Default/Public/images/xia.png) right no-repeat');
});
16）返回顶部,使用 winHeight = $(window).height();
// <style>
// #go_top{position:fixed; right:100px;bottom:50px;}
// </style>
// <!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->
// <div id="go_top">
// <img src="../Public/images/top.png"/ alt="回到顶部图片" style="width:50px;height:50px;">
// </div>
//返回顶部
$(document).ready(function(){
$("#go_top").hide();
$(function () {
//检测屏幕高度
var height=$(window).height();
//scroll() 方法为滚动事件
$(window).scroll(function(){
if ($(window).scrollTop()>height){
$("#go_top").fadeIn(500);
}else{
$("#go_top").fadeOut(500);
}
});
$("#go_top").click(function(){
$('body,html').animate({scrollTop:0},100);
return false;
});
});
});
17)检测键盘，判断输入
//如果是按了F11,就刷新页面
document.onkeydown=function(){
if(window.event.keyCode == 122){
// window.event.keyCode=9;
function myrefresh()
{
window.location.reload();
}
myrefresh();
}
}
18)输入框判断字数。配合maxlength="120";限制字数
$(function() {
$(document).keyup(function() {
var text = $("#consult_content").val();
var counter = text.length;
$("#name_word").text(counter+'/120');
});
});
19)页面确认后才执行
$(function() {
if(confirm(msg)){
alert('ok')
}else{
return false;
}
})
20)ajax动态修改页面
$("#body").html(data);
//或者
var table = document.body.querySelector('.mui-table-view');
table.innerHTML += data;
21）检测页面是否有滚动
window.onscroll = function(){alert('600');}
22）页面加载完
$(document).ready(function(){
//逻辑语句
});
23）点击复制，像网上的复制代码，还有的就是推广链接复制等等应用。
//可以用透明度为0的input的框
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好，可贴粘。");
}
// <textarea cols="20" rows="10" id="biao1" >用户定义的代码区域</textarea>
// <input type="button" onClick="copyUrl2()" value="点击复制代码" />
24)确认对话框后，跳转
$(function(){
function ajax_get_confirm2(msg, url){
if(confirm(msg)){
window.location.href=url;
}else{
return false;
}
}
})
25)克隆
$("#cshi").click(function(){
$("#tes").append($("#output").clone());
})
26) 屏幕监听加载
//绑定滚动事件
$(window).scroll(function(){
//如果当前页面正在加载数据那么代码不执行
if(isapp) return;
if(isLoading) return;
//获取文档的高度
var dH = $(document).height();
//获取滚动高度
var sH = $(window).scrollTop();
//获取可视区域的高度
var wH = $(window).height();
//检测尺寸
if(dH - sH - wH <= 200){
//修改检测变量的值 为真
// isLoading = true;
//请求数据
load(obj,template);
}
})
28) 点击展开与收缩
$(function(){
$(".conten .conten-item-t").click(function(){
$(this).nextAll().toggle('1000');
$(this).toggleClass('s-d');
});
});
29) 鼠标放上去就显示
.product-t .product-t-l:hover .select-list{display: block;}
30)身份证验证
function isCardNo(card)
{
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(reg.test(card) === false)
{
alert("身份证输入不合法");
return false;
}
}