效果：代码：<style>.w{width:1000px;margin:0auto;margin-top:10px;}.header{height:200px;background-color:purple;}.banner{height:300px;background-color:skyblue;}.main{height:1000px;background-color:yellowgreen;}span{display:none;position:absolute;bottom:0;}.slider-bar{position:absolute;top:400px;left:50%;margin-left:500px;width:30px;height:100px;background-color:pink;}</style><body><divclass="slider-bar"><spanclass="goBack">返回顶部</span></div><divclass="headerw">头部区域</div><divclass="bannerw">banner区域</div><divclass="mainw">主体部分</div></body><script>//1.获取元素varslider_bar=document.querySelector('.slider-bar');varbanner=document.querySelector('.banner');//banner.offsetTop被卷去头部的大小，一定要写在滚动的外面varbannerTop=banner.offsetTop;//侧边栏固定定位之后变化的数值varsliderbarTop=slider_bar.offsetTop-bannerTop;//获取main主体元素varmain=document.querySelector('.main');vargoBack=document.querySelector('.goBack');varmainTop=main.offsetTop;//2.页面滚动事件scrolldocument.addEventListener('scroll',function(){console.log(window.pageYOffset);//3.被卷去头部大于212时候，侧边栏改为固定定位if(window.pageYOffset>=bannerTop){slider_bar.style.position='fixed';slider_bar.style.top=sliderbarTop+'px';}else{slider_bar.style.position='absolute';slider_bar.style.top='400px';}if(window.pageYOffset>=mainTop){goBack.style.display='block';}else{goBack.style.display='none';}});//点击返回顶部模块，让窗口滚动到页面最上方goBack.addEventListener('click',function(){//里面的xy不加单位//窗口滚动，对象是windowanimate(window,0);});//动画函数functionanimate(obj,target,callback){clearInterval(obj.timer);obj.timer=setInterval(function(){//步长值写到定时器的里面//把步长值改为整数,不要出现小数的问题varstep=(target-window.pageYOffset)/10;step=step>0?Math.ceil(step):Math.floor(step);if(window.pageYOffset==target){clearInterval(obj.timer);//回调函数位置：定时器结束的位置if(callback){//调用函数callback();}}//把每次步长值给为逐渐变小的值(目标值-现在位置/10)//obj.style.left=window.pageYOffset+step+'px';window.scroll(0,window.pageYOffset+step);},15);}</script>
Jquery如何获取表单的全部数据，用于ajax提交varformData={};vart=$('#Form').serializeArray();$.each(t,function(){formData[this.name]=this.value;});console.log(JSON.stringify(formData));说明：先获取内容，然后构建理想对象数据，最后是转为json字符串，不需要可以不转化
<inputtype="file"id="file"/><script>varsize=$("#file")[0].files[0].size;</script>
jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。一：bind(type,[data],function(eventObject))bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：type:事件类型，如click、change、mouseover等;data:传入监听函数的参数，通过event.data取到。可选;function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意bind的源码：bind:function(types,data,fn){returnthis.on(types,null,data,fn);}$('#myolli').bind('click',getHtml);bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。jQuery还有一种事件绑定的简写方式如a.click(function(){});、a.change(function(){});等，它们的作用与bind一样，仅仅是简写而已。二：live(type,[data],fn)源码live:function(types,data,fn){jQuery(this.context).on(types,this.selector,data,fn);returnthis;}可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围，看了下面的代码就清楚了：$('#myolli').context;//document$('#myolli','#myol').context;//document$('#myolli',$('#myol')[0]);//ol通常情况下，我们都不会像第三种方式那样使用选择器，所以也就认为这个context通常就是document了，即live方法把监听器绑定到了document上了。不把监听器直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这里回忆一下。live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以用event.currentTarget来获取到当前捕捉到事件的节点。下面的例子来揭晓：$('#myolli').live('click',getHtml);三：delegatelive存在那样的缺点，所以我们就思考，既然老爷子负担那么重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。源码delegate:function(selector,types,data,fn){returnthis.on(types,selector,data,fn);}又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先：$('#myol').delegate('li','click',getHtml);四：on()事件绑定①使用on进行单事件绑定$("button").on("click",function(){$(this)取到当前调用事件函数的对象console.log($(this).html());});②使用on同时为多个事件，绑定同一函数$("button").on("mouseoverclick",function(){console.log($(this).html())})；③调用函数时，传入自定义参数$("button").on("click",{name:"jianghao"},function(event){//使用event.data.属性名找到传入的参数console.log(event.data.name);})④使用on进行多事件多函数绑定$("button").on({click:function(){console.log("click")},mouseover:function(){console.log("mouseOver")}});⑤使用on进行事件委派将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；eg：$("p").click(function(){});$(document).on("click","p",function(){});作用：默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增p元素时，无法绑定到新元素上；使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><style></style></head><body><divclass="box"><divclass="card"><imgid="testimg1"src="./img/a.jpg"/><ahref="javascript:;"class="down_btn_a">点击下载</a></div></div><script>//判断是否为Trident内核浏览器(IE等)函数functionbrowserIsIe(){if(!!window.ActiveXObject||"ActiveXObject"inwindow){returntrue;}else{returnfalse;}}//创建iframe并赋值的函数,传入参数为图片的src属性值.functioncreateIframe(imgSrc){//如果隐藏的iframe不存在则创建if($("#IframeReportImg").length===0){$('<iframestyle="display:none;"id="IframeReportImg"name="IframeReportImg"onload="downloadImg();"width="0"height="0"src="about:blank"></iframe>').appendTo("body");}//iframe的src属性如不指向图片地址,则手动修改,加载图片if($('#IframeReportImg').attr("src")!=imgSrc){$('#IframeReportImg').attr("src",imgSrc);}else{//如指向图片地址,直接调用下载方法downloadImg();}}//下载图片的函数functiondownloadImg(){//iframe的src属性不为空,调用execCommand(),保存图片if($('#IframeReportImg').src!="about:blank"){window.frames["IframeReportImg"].document.execCommand("SaveAs");}}//接下来进行事件绑定varaBtn=$(".card.down_btn_a");if(browserIsIe()){//是ie等,绑定事件aBtn.on("click",function(){varimgSrc=$(this).siblings("img").attr("src");//调用创建iframe的函数createIframe(imgSrc);});}else{aBtn.each(function(i,v){//支持download,添加属性.varimgSrc=$(v).siblings("img").attr("src");$(v).attr("download",imgSrc);$(v).attr("href",imgSrc);})}</script></body></html>
1、$.getScript(url,success(response,status));2、varscript=document.createElement('script');script.type='text/jacascript';script.src='url';//填自己的js路径$('body').append(script);3、varscript=$('<script>alert("Iamascriptelement")<\/script>');$('body').append(script);4、varscript=$('<scriptsrc="....."></script>');//创建script标签$('body').append(script);//将标签插入body尾部5、document.write('<scriptsrc="'+realation+'Js/jquery.cookie.js"></script>');6、varscript=document.createElement("script");script.src="//www.zhansanjie.com/jquery.js";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(script,s);
for(letiinnameData){$("#userName").val(nameData[i].userName).trigger("change");}
第一种：用jquery里自带的$.parseJSON函数：<scriptlanguage="javascript">varjsonstr1="{\"id\":\"1\",\"name\":\"John\"}";varobj=$.parseJSON(jsonstr1);alter(obj.id);</script>***用$.parseJSON来把字符串转换为json对象，对字符串要求极高，字符串里的属性全部用双引号来包裹，并且不能用单引号。第二种：js里的方法，用eval把字符串转换为json：<scriptlanguage="javascript">//这三种写法都可以用eval来转换varjsonstr1="{\"id\":\"1\",\"name\":\"John\"}";varjsonstr1={'id':'1','name':'John'};varjsonstr1={id:1,name:'John'};varobj=eval('('+jsonstr1+')');alert(obj.id);</script>***在用eval把字符串转为json时，需要在字符串外包裹一对小括号；第三种：使用浏览器自带的JSON.parse：<scriptlanguage="javascript">varjsonstr1="{\"id\":\"1\",\"name\":\"John\"}";varobj=JSON.parse(jsonstr1)alert(obj.id);</script>***Firefox，chrome，opera等浏览器都支持JSON.parse，但IE6、IE7不支持，并且对要转换的字符串要求也比较高。第四种：JSON官方提供的方法：www.json.org提供了一个json.js，可以用parse()方法来把字符串转换为json，用stringify()来把json转换为字符串；
jQuery动态设置样式（style、css）一、jQuery设置css样式<divstyle="background-color:#ffffff;padding-left:10px;">测试jQuery动态获取padding-left</div>1、用css()方法返回元素的样式属性$("div").css("padding-left"));2、用css()设置样式$("div").css("color","yellow");3、设置多个样式$("div").css({"background-color":"yellow","font-size":"200%"});varcss={background-color:'#EEE',height:'500px',margin:'10px',padding:'2px5px'};$("div").css(css);
中国互联网举报中心