★1工碾、例子 ★2渊额、條件簡寫 ★3旬迹、html元素操作 ★4舱权、js/jq 動(dòng)態(tài)操作on ★5宴倍、判斷是否含有一個(gè)指定的類 ★6鸵贬、阻止觸摸事件/解除觸摸鎖定 ★7阔逼、密碼框的明密文(顯示和隱藏) 顯示 ★8嗜浮、日期 ★9危融、單選框吉殃、復(fù)選框的選中/未選中 ★10瓦灶、css擴(kuò)展使用：多次點(diǎn)擊/判斷賦值 ★11贼陶、正則表達(dá)式 ★12每界、監(jiān)聽瀏覽器窗口大小的變化事件 ★13、判斷瀏覽器類型：
★1上荡、例子：
①?頭尾：
$(document).ready(function () {
內(nèi)容
})
②?點(diǎn)擊：click 是方法；onclick是事件逛薇；執(zhí)行click就是模擬鼠標(biāo)點(diǎn)擊永罚，同時(shí)會(huì)觸發(fā)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事件會(huì)在click事件之前執(zhí)行
* onclick不帶html：var btn1 = document.getElementById('btn1');? function abc() {? ? alert('abc');}
? ? btn1.onclick = abc; //當(dāng)點(diǎn)擊的時(shí)候執(zhí)行abc這個(gè)函數(shù)呢袱，等價(jià)于 btn1.onclick=function abc(){alert('abc');}
? //btn1.onclick = null羞福； //去掉綁定的事件
③?順序?qū)?yīng)，適用全局：
$('.選項(xiàng)卡').hover(function(){
var num = $(this).parent('.選項(xiàng)卡容器').children('.選項(xiàng)卡').index(this); //得到選項(xiàng)卡索引數(shù)字
$(this).parent('.選項(xiàng)卡容器').children('.選項(xiàng)卡').removeClass("選項(xiàng)卡選中效果") //去掉所有選項(xiàng)卡的高亮樣式
$(this).addClass("選項(xiàng)卡選中效果"); //給被選中的選項(xiàng)卡高亮樣式
$(this).parent('.選項(xiàng)卡容器').siblings('.主體內(nèi)容容器').children('每個(gè)主體內(nèi)容').hide();
$(this).parent('.選項(xiàng)卡容器').siblings('.主體內(nèi)容容器').children('每個(gè)主體內(nèi)容').eq(num).show(); //索引數(shù)字對(duì)應(yīng)的主體內(nèi)容顯示
})
? 2個(gè)尾數(shù)相同的class的對(duì)應(yīng)
$("[class^='adtab']").click(function(){
var id=$(this).attr("class");
var num=id.substr(id.length-1,1); //得到被點(diǎn)擊的class的尾數(shù)
$('.wtab'+num).addClass('layui-show');
? ? $('.wtab'+num).siblings(".layui-tab-item").removeClass('layui-show');
})
④?遍歷张峰、循環(huán)each挟炬、for：
* $('br').each(function (){ });
* var arr = [ "one", "two", "three", "four"];? ?
? $.each(arr, function(){? ? alert(this);? ? ? });? //這個(gè)each輸出的結(jié)果分別為：one,two,three,four
* for-循環(huán) ：for (var i=0;i<cars.length;i++){}
⑤?封裝事件/調(diào)用事件
? function a(){//定義一個(gè)方法a}
? $(function(){
? ? a();//JQuery中調(diào)用方法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'}【實(shí)際是個(gè)數(shù)組】;$("#result").css(divcss);
$("#61dh a").hover(function(){
$(this).css('color','#999');},【鼠標(biāo)劃過時(shí)】
function(){$(this).css('color','#123456');});【callback鼠標(biāo)劃過后】
⑦?延時(shí)
* setTimeout(function(){ alert("Hello"); }, 3000);
* var myVar;
? function myFunction() {myVar = setTimeout(alertFunc, 3000);}
?重復(fù)執(zhí)行婿滓、計(jì)時(shí)
? function alertFunc() {? alert("Hello!");}
setInterval(function xxx(){
? //業(yè)務(wù)邏輯
},隔多少時(shí)間執(zhí)行一次)
⑧?變量混用：
var id='#'+i ; $(id).show();
this.src="test"+i+".jpg"
$('.menu i').animate({ left:(num*25.12)+'%'});
content: "<div id='hid-wtab"+num+"'>"+num+"內(nèi)容</div>"
var lengg = $("[lay-id='id"+ i +"']").length
⑧?//jquery 通過得到對(duì)象的長度判斷對(duì)象是否存在
function testJquery() {
if ($(".tel").length > 0) {
alert("存在");
}
else {
alert("不存在");
}
}
⑧?選擇class中的第一個(gè)第n個(gè)class：$(".pro_tab:eq(0)").show();
$(".protab ul li:eq(0)")
★2、if-條件簡寫
冒號(hào)：在這里用來分割不同條件的返回值卿吐。
var result = (condition exp) ? (value1) : (value2) ;問號(hào)前面的條件成立則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：被選元素的結(jié)尾插入內(nèi)容【內(nèi)部】? ? ? ? $("p").append("Some appended text.");
2尚骄、prepend() 方法在被選元素的開頭插入內(nèi)容【內(nèi)部】
3倔丈、after() 方法在被選元素之后插入內(nèi)容乃沙。【外部】? $("img").after("Some text after");
4蜀铲、before() 方法在被選元素之前插入內(nèi)容记劝⊙岢螅【外部】 $("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);
?創(chuàng)建新元素
var txt1="<p>Text.</p>";? ? ? ? ? ? ? // 以 HTML 創(chuàng)建新元素
var txt2=$("<p></p>").text("Text.");? // 以 jQuery 創(chuàng)建新元素
var txt3=document.createElement("p");? // 以 DOM 創(chuàng)建新元素? ? txt3.innerHTML="Text.";
?獲得juqery某一元素的html內(nèi)容(包括自身標(biāo)簽)
定義這樣一個(gè)jq擴(kuò)展
jQuery.fn.outerHTML = function(s) {
? return (s) ? this.before(s).remove() : $("<Hill_man>").append(this.eq(0).clone()).html();
}
然后
$("year").outerHTML
這樣就可以了.
? >> .html()會(huì)將標(biāo)簽也取出,.text()只會(huì)獲取文本內(nèi)容
?兩種方式往頁面上插入一個(gè)script元素：
2）創(chuàng)建元素的方式：
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);
? ? ▼▼【錯(cuò)誤教訓(xùn)“”雙引號(hào)里面不能出現(xiàn)雙引號(hào)耕驰！否則瀏覽器不解析ｋ狻！】
?jquery的document.write覆蓋原網(wǎng)頁：在jquery中不要使用document.write而是使用document.getElementById("emb").innerHTML=a
?當(dāng)然采用appendChild的方式也會(huì)有兼容性問題媒抠，比如干脆沒有<head>標(biāo)簽弟断，或者IE6下的<base>標(biāo)簽未閉合會(huì)吞兄弟節(jié)點(diǎn)這種奇怪的事情
?Jquery不可用innerHTML：$("#responsediv") 是個(gè)Jquery對(duì)象，Jquery沒有innerHTML這個(gè)屬性领舰，應(yīng)該這樣寫$("#responsediv")[0].innerHTML=msg 就可以獲得這個(gè)Dom對(duì)象使用innerHTML夫嗓。
★4、js/jq 動(dòng)態(tài)添加的元素不能觸發(fā)綁定事件解決方案：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(){})
此時(shí)動(dòng)態(tài)加載出來的元素一定要在$(‘父元素’)里面冲秽，否則綁定事件失效。換句話說矩父，本應(yīng)該綁定A元素锉桑，但是A元素是動(dòng)態(tài)生成的，所以jq應(yīng)該獲取A元素的父元素來監(jiān)聽A元素是否發(fā)生click事件球订。
舉個(gè)例子:
? ? $('.a-Box').on('click', 'a', function(){
? ? ? ? alert('Jachin');
? ? })
? $('body').on('change',"#id",function(){……});
★5因苹、判斷一個(gè)元素是否含有一個(gè)指定的類
if($('div').is('.redColor')){
$('div').addClass('blueColor');
}
if($('div').hasClass('redColor')){
$('div').addClass('blueColor');
}
★瀏覽器尺寸改變時(shí)：
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 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旺上、單選框杭攻、復(fù)選框的選中/未選中
$(".allchooseall input").prop("checked", true);
if ($(this).is(':checked'))
var unCheckedBoxs = $("input[name='myCheckbox']").not("input:checked");【未選中的checkbox锅睛，not：不是】
★8、生成當(dāng)前日期
var date = new Date();? ? ? ? ? ? ? ? //得到當(dāng)前日期原始模式
var newyear = date.getFullYear();? ? //得到當(dāng)前日期年份
var newmonth = date.getMonth() + 1;? //得到當(dāng)前日期月份（注意： getMonth()方法一月為 0, 二月為 1, 以此類推哥遮。）
var day = date.getDate();? ? ? ? ? ? //得到當(dāng)前某日日期（1-31）
newmonth = (newmonth<10 ? "0"+newmonth:newmonth);? //10月以下的月份自動(dòng)加0
var newdate = newmonth + "月" + day +"日";
?h5自帶日期選擇器input：賦予其當(dāng)前日期
<input type="month" id="datePicker">
document.getElementById('datePicker').valueAsDate = new Date();
★10松蒜、css擴(kuò)展使用：多次點(diǎn)擊/判斷賦值
$("#add-btn").on("click",function(){
? ? ? ? $("div").css("width","+=20")
? ? ? });
$("p").css("backgroundColor",function(dap){
? ? ? ? return dap%2 == 0 ? "red":"blue";//索引值從0開始（三目運(yùn)算）
? ? ? })
★12玖瘸、監(jiān)聽 瀏覽器窗口大小的變化事件
$(window).resize(function () {? ? ? ? ? //當(dāng)瀏覽器大小變化時(shí)
? ? alert($(window).height());? ? ? ? ? //瀏覽器時(shí)下窗口可視區(qū)域高度
? ? alert($(document).height());? ? ? ? //瀏覽器時(shí)下窗口文檔的高度
? ? alert($(document.body).height());? //瀏覽器時(shí)下窗口文檔body的高度
? ? alert($(document.body).outerHeight(true)); //瀏覽器時(shí)下窗口文檔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());
等號(hào)后面的表達(dá)式返回的就是 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蜘拉、每隔一段時(shí)間執(zhí)行一次setInterval
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)悴了。
function funcDemo(){
//每隔3秒執(zhí)行一次countTime方法
window.setInterval("countTime()",3000);
}
window.onload = funcDemo;
★15、數(shù)組：var a=new Array({key:'1',value:"a"},{key:'2',value:"b"},{key:'3',value:"c"},{key:'4',value:"d"});
嵌套數(shù)組：? var info=[{"name":"最近想跳河","interst":["歷史","美食"],"wife":{"name":"a.wen","interst":["旅游","美食","教育人"]}}];
★16嫉戚、滾動(dòng)
設(shè)置滾動(dòng)條據(jù)頂部的高度：$("div").scrollTop(100); //把 scroll top offset 設(shè)置為 100px
獲得滾動(dòng)條的高度：$("div").scrollTop()报慕；//獲得 scroll top offset
觸發(fā)滾動(dòng)事件：$(selector).scroll()
將函數(shù)綁定到滾動(dòng)事件中：$(selector).scroll(function)
監(jiān)聽滾動(dòng)事件眠冈，判斷當(dāng)滾動(dòng)到距離頂部700px時(shí)栖忠，
$(window).scroll(function(){var $scroll_height = $(".gray").scrollTop();//滾動(dòng)到距離頂部數(shù)值})
混合用法：$(this).offset().top+25+"px"
? ?動(dòng)畫：$('body,html').animate({scrollTop:0},500)捐川，這里結(jié)合了animate（）方法（只能用于body逞频，html）陷揪，另一種則是$(window).scrollTop（0）【window不可用動(dòng)畫】
? ?距離：xx=$(".panzoom img").offset(); console.log(xx.left); //xx.left距離左邊框的距離溅漾，xx.top距離頂部的距離
★清除style樣式
$("#show").removeAttr("style"); //ie,ff均支持
★隨機(jī)數(shù)
Math.random()生成[0,1)的數(shù)，所以
Math.random()*5生成{0,5)的數(shù)八堡。
★圖片load問題
load事件觸發(fā)一次后再刷新就不觸發(fā)樟凄？因?yàn)閳D片已經(jīng)在緩存了，加載過快還沒讀到j(luò)s就加載完了兄渺，就沒有加載事件了
解決方法：1缝龄、事件寫在head里面（不確定可行）
2、<img id="img" onload="func()"/>
★表單select取值
$("#select1").change(function(){ //change觸發(fā)
? jQuery("#select1").val(); //取得選中的值
? jQuery("#select1? option:selected").text(); //取得的文本
});
★默認(rèn)參數(shù)值
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(){})在高版本中已經(jīng)廢棄示惊，（不光是window，其他對(duì)象的load也會(huì)受影響）
請(qǐng)用：$(window).on('load',function(){});替代愉镰∶追＃【.load(】替換為【.on('load',】
★jquery click()方法模擬點(diǎn)擊
打印$(“a”)[0]，得到的是http://www.baidu.com丈探，但實(shí)際上$(“a”)[0]是一個(gè)object對(duì)象
$("#abc ")[0].click();可以模擬跳轉(zhuǎn)
●$(#btn").trigger("click");$('#btn").click();
$('input').trigger("change");$("input").trigger("focus");? //自身特性觸發(fā)綁定
● $('#btn').bind("myClick", function(){? ?
? ? ? ? ? ? $('#test').append("<p>我的自定義事件.</p>");? ?
? ? });
$('#btn').trigger("myClick");
★點(diǎn)擊空白處隱藏彈窗
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();
});
// 點(diǎn)擊任意部分關(guān)閉
$("body").click(function (e) {
? ? if (!$(e.target).closest("#sheet,#sliderSegmentedControl").length) {
? ? ? ? $("#sliderSegmentedControl").removeClass("show");
$('.bgg').hide();
? ? }
});
vim編輯器? Aptana
sparkline是一個(gè)開源的圖表控件碗降，可以生成很小也很好看的圖
