★1、例子 ★2、条件简写 ★3、html元素操作 ★4、js/jq 动态操作on ★5、判断是否含有一个指定的类 ★6、阻止触摸事件/解除触摸锁定 ★7、密码框的明密文(显示和隐藏) 显示 ★8、日期 ★9、单选框、复选框的选中/未选中 ★10、css扩展使用：多次点击/判断赋值 ★11、正则表达式 ★12、监听浏览器窗口大小的变化事件 ★13、判断浏览器类型：
★1、例子：
①▶头尾：
$(document).ready(function () {
内容
})
②▶点击：click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件
* $('.r12i_a1').click(function(){
$(this).addClass('r12i_aa');
$(this).siblings('a').removeClass('r12i_aa');
})
解绑click： btn2.removeEventListener('click', showMsg, false); //去除绑定
* $('父元素').on('click', '子元素', function(){})
* onclick+html： <input id="btn1" type="button" onclick="test();" /> function test() {alert("我是行间事件");} //onclick事件会在click事件之前执行
* onclick不带html：var btn1 = document.getElementById('btn1'); function abc() { alert('abc');}
btn1.onclick = abc; //当点击的时候执行abc这个函数，等价于 btn1.onclick=function abc(){alert('abc');}
//btn1.onclick = null； //去掉绑定的事件
③▶顺序对应，适用全局：
$('.选项卡').hover(function(){
var num = $(this).parent('.选项卡容器').children('.选项卡').index(this); //得到选项卡索引数字
$(this).parent('.选项卡容器').children('.选项卡').removeClass("选项卡选中效果") //去掉所有选项卡的高亮样式
$(this).addClass("选项卡选中效果"); //给被选中的选项卡高亮样式
$(this).parent('.选项卡容器').siblings('.主体内容容器').children('每个主体内容').hide();
$(this).parent('.选项卡容器').siblings('.主体内容容器').children('每个主体内容').eq(num).show(); //索引数字对应的主体内容显示
})
2个尾数相同的class的对应
$("[class^='adtab']").click(function(){
var id=$(this).attr("class");
var num=id.substr(id.length-1,1); //得到被点击的class的尾数
$('.wtab'+num).addClass('layui-show');
$('.wtab'+num).siblings(".layui-tab-item").removeClass('layui-show');
})
④▶遍历、循环each、for：
* $('br').each(function (){ });
* var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){ alert(this); }); //这个each输出的结果分别为：one,two,three,four
* for-循环 ：for (var i=0;i<cars.length;i++){}
⑤▶封装事件/调用事件
function a(){//定义一个方法a}
$(function(){
a();//JQuery中调用方法a
});
⑥▶改css
$(".table2 tr:odd").css("background-color","#f3f4f5");
【$("p").css({"background-color":"yellow","font-size":"200%"});】
$("#61dh a").css("color") →输出文字颜色值
var divcss = {background: '#EEE',width: '478px',margin: '10px 0 0',padding: '5px 10px',border: '1px solid #CCC'}【实际是个数组】;$("#result").css(divcss);
$("#61dh a").hover(function(){
$(this).css('color','#999');},【鼠标划过时】
function(){$(this).css('color','#123456');});【callback鼠标划过后】
⑦▶延时
* setTimeout(function(){ alert("Hello"); }, 3000);
* var myVar;
function myFunction() {myVar = setTimeout(alertFunc, 3000);}
▶重复执行、计时
function alertFunc() { alert("Hello!");}
setInterval(function xxx(){
//业务逻辑
},隔多少时间执行一次)
⑧▶变量混用：
var id='#'+i ; $(id).show();
this.src="test"+i+".jpg"
$('.menu i').animate({ left:(num*25.12)+'%'});
content: "<div id='hid-wtab"+num+"'>"+num+"内容</div>"
var lengg = $("[lay-id='id"+ i +"']").length
⑧▶//jquery 通过得到对象的长度判断对象是否存在
function testJquery() {
if ($(".tel").length > 0) {
alert("存在");
}
else {
alert("不存在");
}
}
⑧▶选择class中的第一个第n个class：$(".pro_tab:eq(0)").show();
$(".protab ul li:eq(0)")
★2、if-条件简写
冒号：在这里用来分割不同条件的返回值。
var result = (condition exp) ? (value1) : (value2) ;问号前面的条件成立则result=value1，否则就=value2
if (i==0) { $(this).hide(); }; →if (i==0) ? $(this).hide() : null ;
if (i==0) { $(this).hide();} else{$(this).show();}; →if (i==0) ? $(this).hide() : $(this).show();
&&【且】
|| 【或】
▶元素有或没有捕捉的高度写法【var ssq = $(".search").val() == undefined ? 0 : $(".search").height();
】
★3、html元素操作
▶插入加入新元素
1、append：被选元素的结尾插入内容【内部】 $("p").append("Some appended text.");
2、prepend() 方法在被选元素的开头插入内容【内部】
3、after() 方法在被选元素之后插入内容。【外部】 $("img").after("Some text after");
4、before() 方法在被选元素之前插入内容。【外部】 $("img").before("Some text before");$("img").after(txt1,txt2,txt3);
5、$('#resText').empty(); var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; })
$('#resText').html(html);
▶创建新元素
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text.";
▶获得juqery某一元素的html内容(包括自身标签)
定义这样一个jq扩展
jQuery.fn.outerHTML = function(s) {
return (s) ? this.before(s).remove() : $("<Hill_man>").append(this.eq(0).clone()).html();
}
然后
$("year").outerHTML
这样就可以了.
>> .html()会将标签也取出,.text()只会获取文本内容
▶两种方式往页面上插入一个script元素：
2）创建元素的方式：
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://www.example.com/1.js');
document.getElementsByTagName('head')[0].appendChild(script);
▼▼【错误教训“”双引号里面不能出现双引号！否则浏览器不解析！！】
☻jquery的document.write覆盖原网页：在jquery中不要使用document.write而是使用document.getElementById("emb").innerHTML=a
☻当然采用appendChild的方式也会有兼容性问题，比如干脆没有<head>标签，或者IE6下的<base>标签未闭合会吞兄弟节点这种奇怪的事情
▶Jquery不可用innerHTML：$("#responsediv") 是个Jquery对象，Jquery没有innerHTML这个属性，应该这样写$("#responsediv")[0].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。
★4、js/jq 动态添加的元素不能触发绑定事件解决方案：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1
jquery1.6版本以下都不支持on委托事件
jquery1.3 至 jQuery1.8版都支持live委托事件
jquery1.9 以后的版本不支持live委托事件,但是on事件可以替代live
$('父元素').on('click', '子元素', function(){})
此时动态加载出来的元素一定要在$(‘父元素’)里面，否则绑定事件失效。换句话说，本应该绑定A元素，但是A元素是动态生成的，所以jq应该获取A元素的父元素来监听A元素是否发生click事件。
举个例子:
$('.a-Box').on('click', 'a', function(){
alert('Jachin');
})
$('body').on('change',"#id",function(){……});
★5、判断一个元素是否含有一个指定的类
if($('div').is('.redColor')){
$('div').addClass('blueColor');
}
if($('div').hasClass('redColor')){
$('div').addClass('blueColor');
}
★浏览器尺寸改变时：
window.onresize = function(){ }
★6、阻止触摸事件 /解除触摸锁定
document.addEventListener("touchmove", myFunction);
function myFunction(e) {
e.preventDefault();
}
//解除触摸锁定
document.removeEventListener("touchmove", myFunction);
★7、密码框的明密文(显示和隐藏) 显示
var passwordeye = $('.mui-icon-eye');
var showPwd = $("#password");
$('.mui-icon-eye').on('click',function(){
if($('.mui-icon-eye').hasClass('gray')){
$(this).removeClass('gray').addClass('blue');//gray是不可见的class，密码可见visible=blue
showPwd.prop('type','text'); //input的type变成text
}else{
$('.mui-icon-eye').removeClass('blue').addClass('gray');//密码不可见
showPwd.prop('type','password');//input的type变成password
};
});
▼prop()和attr()
<a href="http://www.baidu.com" target="_self">百度</a>
href,target是a链接中固有的属性值 用prop()方法获取属性值.
<a href="#" id="desc" action="drop">减少</a>
href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所以如果想获取action的属性值,用attr().
★清空value
$("input").attr("value","");
$('.input').val("");
★9、单选框、复选框的选中/未选中
$(".allchooseall input").prop("checked", true);
if ($(this).is(':checked'))
var unCheckedBoxs = $("input[name='myCheckbox']").not("input:checked");【未选中的checkbox，not：不是】
★8、生成当前日期
var date = new Date(); //得到当前日期原始模式
var newyear = date.getFullYear(); //得到当前日期年份
var newmonth = date.getMonth() + 1; //得到当前日期月份（注意： getMonth()方法一月为 0, 二月为 1, 以此类推。）
var day = date.getDate(); //得到当前某日日期（1-31）
newmonth = (newmonth<10 ? "0"+newmonth:newmonth); //10月以下的月份自动加0
var newdate = newmonth + "月" + day +"日";
▶h5自带日期选择器input：赋予其当前日期
<input type="month" id="datePicker">
document.getElementById('datePicker').valueAsDate = new Date();
★10、css扩展使用：多次点击/判断赋值
$("#add-btn").on("click",function(){
$("div").css("width","+=20")
});
$("p").css("backgroundColor",function(dap){
return dap%2 == 0 ? "red":"blue";//索引值从0开始（三目运算）
})
★12、监听 浏览器窗口大小的变化事件
$(window).resize(function () { //当浏览器大小变化时
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height()); //浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});
★13、判断浏览器类型：
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
等号后面的表达式返回的就是 true/false， 可以直接用来替换原来的 $.browser.msie 等。
检查是否为 IE6：
// Old
if ($.browser.msie && 7 > $.browser.version) {}
// New
if ('undefined' == typeof(document.body.style.maxHeight)) {}
检查是否为 IE 6-8：
if (!$.support.leadingWhitespace) {}
★14、每隔一段时间执行一次setInterval
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
function funcDemo(){
//每隔3秒执行一次countTime方法
window.setInterval("countTime()",3000);
}
window.onload = funcDemo;
★15、数组：var a=new Array({key:'1',value:"a"},{key:'2',value:"b"},{key:'3',value:"c"},{key:'4',value:"d"});
嵌套数组： var info=[{"name":"最近想跳河","interst":["历史","美食"],"wife":{"name":"a.wen","interst":["旅游","美食","教育人"]}}];
★16、滚动
设置滚动条据顶部的高度：$("div").scrollTop(100); //把 scroll top offset 设置为 100px
获得滚动条的高度：$("div").scrollTop()；//获得 scroll top offset
触发滚动事件：$(selector).scroll()
将函数绑定到滚动事件中：$(selector).scroll(function)
监听滚动事件，判断当滚动到距离顶部700px时，
$(window).scroll(function(){var $scroll_height = $(".gray").scrollTop();//滚动到距离顶部数值})
混合用法：$(this).offset().top+25+"px"
▶动画：$('body,html').animate({scrollTop:0},500)，这里结合了animate（）方法（只能用于body，html），另一种则是$(window).scrollTop（0）【window不可用动画】
▶距离：xx=$(".panzoom img").offset(); console.log(xx.left); //xx.left距离左边框的距离，xx.top距离顶部的距离
★清除style样式
$("#show").removeAttr("style"); //ie,ff均支持
★随机数
Math.random()生成[0,1)的数，所以
Math.random()*5生成{0,5)的数。
★图片load问题
load事件触发一次后再刷新就不触发？因为图片已经在缓存了，加载过快还没读到js就加载完了，就没有加载事件了
解决方法：1、事件写在head里面（不确定可行）
2、<img id="img" onload="func()"/>
★表单select取值
$("#select1").change(function(){ //change触发
jQuery("#select1").val(); //取得选中的值
jQuery("#select1 option:selected").text(); //取得的文本
});
★默认参数值
function example(name,age){
name=name||'貂蝉';
age=age||21;
alert('你好！我是'+name+'，今年'+age+'岁。');
}
example('王五');//输出：你好！我是王五，今年21岁。
example('王五',30);//输出：你好！我是王五，今年30岁。
example(null,30);//输出：你好！我是貂蝉，今年30岁。
function example(setting){
var defaultSetting={
name:'小红',
age:'30',
sex:'女',
phone:'100866',
QQ:'100866',
birthday:'1949.10.01'
};
$.extend(defaultSetting,settings);
var message='姓名：'+defaultSetting.name
+'，性别：'+defaultSetting.sex
+'，年龄：'+defaultSetting.age
+'，电话：'+defaultSetting.phone
+'，QQ：'+defaultSetting.QQ
+'，生日：'+defaultSetting.birthday
+'。';
alert(message);
}
example({
name:'小红',
sex:'女',
phone:'100866'
});
//输出：姓名：小红，性别：女，年龄：30，电话：100866，QQ：100866。
★TypeError: e.indexOf is not a function解决方法
$(window).load(function(){})在高版本中已经废弃，（不光是window，其他对象的load也会受影响）
请用：$(window).on('load',function(){});替代。【.load(】替换为【.on('load',】
★jquery click()方法模拟点击
打印$(“a”)[0]，得到的是http://www.baidu.com，但实际上$(“a”)[0]是一个object对象
$("#abc ")[0].click();可以模拟跳转
●$(#btn").trigger("click");$('#btn").click();
$('input').trigger("change");$("input").trigger("focus"); //自身特性触发绑定
● $('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定义事件.</p>");
});
$('#btn').trigger("myClick");
★点击空白处隐藏弹窗
1、 $(document).click(function(){
if($(".ewm_show").css('display')=='block'){
$(".ewm_show").hide(250);
$(".ewm_but").show(250);
$(".login-tip").show();
};
});
$('.ewm_but').click(function(){
setTimeout(function(){
$('.ewm_but').hide(250);
$(".ewm_show").show(250);
$(".login-tip").hide();
}, 100);
});
2、var e = e || window.event;
$('#sheet').click(
function () {
$('#sliderSegmentedControl').addClass("show");
$('.bgg').toggle();
});
// 点击任意部分关闭
$("body").click(function (e) {
if (!$(e.target).closest("#sheet,#sliderSegmentedControl").length) {
$("#sliderSegmentedControl").removeClass("show");
$('.bgg').hide();
}
});
vim编辑器 Aptana
sparkline是一个开源的图表控件，可以生成很小也很好看的图
