jquery,js代码摘要

最新推荐文章于 2021-03-19 19:52:32 发布

confoo

最新推荐文章于 2021-03-19 19:52:32 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/confoo/article/details/41380343

本文详细解析了jQuery中的选择器用法，包括基本的子元素选择、后代元素选择、相邻元素选择和通用选择，同时介绍了如何通过jQuery获取和设置滚动条位置，以及实现滚动监听功能。此外，文章还涵盖了CSS滚动条属性和JavaScript的基本操作，包括字符串类型转换、位运算符的使用，以及My97DatePicker插件的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery选择器

1.$('div1 childspan') 表示在这个div下获取所有的childspan元素

2.$('div1 > childspan')表示在这个div下获取他的下一代childspan元素，并不会去查他的子子孙孙

3.$('div1 + nextspan') 表示在这个div的下一个nextspan（他们是兄弟关系）,等于.next()

4.$('div1 ~ nextallspan')表示这个div后面的所有nextallspan节点,等于.nextAll()

2.$('#sss>.aa>.xx‘)

3.scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

4.post发送中文时URIEncoder("");到action中用URLDecoder.decode(request.getParameter("xx"),"UTF-8");解析

关于scroll

jquery中 $(element).scrollTop()可以获取滚动条位置如果加参数还可以设置滚的位置

监听滚动位置永不到最顶部

$('#id').scroll(function(){
if($('#id').scrollTop() == 0){
$('#lid').scrollTop(1);
}
});

css overflow x轴+y轴滚动条

参数scroll auto hidden

scroll 是无论有没有超出框都会显示

auto 只有超出框时才显示

hidden 永不显示（默认）

overflow-y y轴滚动条

注意：滚动条在框没有设置高度时scrolltop设置无效隐藏状态无效

js:

contentWindow 兼容各个浏览器，可取得子窗口的 window 对象

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

new Date() system.js 方法有getFullYear，getMonth，getDate等

Math函数ceil向上取整如12.7结果为13,12.1结果为13

JS类型转换

~~“true” = 1

~~'false' = 0

+'12.7' = 12.7

(+'12.756').toFixed(2) = 12.76 取位数（四舍五入）

释义：

~~ 取整

运算符>>原意是带符号右移，使用>> 0可以将一个可转化的字符串转化成整数:
var si = '12' >> 0; // 12
var sn = '-12' >> 0; // -12
var sf = '12.7' >> 0; // 12
var snf = '-12.7' >> 0; // -12
var ss = '12s' >> 0; // 0

>>>
运算符>>>原意是不带符号右移，可以使用>>> 0将一个字符串转化为整数:
var si = '12' >>> 0; // 12
var sn = '-12' >>> 0; // 4294967284
var sf = '12.7' >>> 0; // 12
var ss = '12s' >>> 0; // 0

js的重载

关键字arguments

用法

function (){

var len = arguments.length;

var id = arguments[0];

var id = arguments[1];

...

}

function order(orderId,orderName){...}

function order(orderId){...}

调用

order(1,'三件套') 注意顺序

原理：

arguments在函数体内部能自行判断传入参数，类似于java中 String... strs

js的继承

关键字prototype

function sys(){

this.basePath='${pageContext.request.contextPath}';

this.prifix = '.jpg';

this.uploadImg = basePath + '/upload/img/';

}

function upload(){}

upload.prototype=new sys();

u = new upload();

console.info(u.basePath);

注意：

1 a.prototype = new b(); a没有instanseof b的关系

2 被复制函数不能用var定义参数

3 复制函数如果方法一致则不进行拷贝

原理：

prototype 类似链条，函数能过链接链接上级函数，当程序调用函数中法时他会通过链条一级一级，如果匹配则直接返回，否则undefined

(call、apply)关键字

My97DatePicker

依据开始时间限制结束日期为后10天

<input class="text" id="resyncStartTime" size="10" readonly type="text" placeholder="生成开始时间"
       onfocus="WdatePicker({el:'resyncStartTime',onpicking:function(dq){refreshEndDate(dq.cal.getNewDateStr())},dateFmt:'yyyy-MM-dd' })"/>-
<input class="text" id="resyncEndTime" size="10" readonly type="text" placeholder="生成结束时间"
       onfocus="WdatePicker({el:'resyncEndTime',dateFmt:'yyyy-MM-dd',
       minDate:'#F{$dp.$D(\'resyncStartTime\')}',maxDate:'#F{$dp.$D(\'resyncStartTime\',{d:+9})}' })"/>

注：#F{}里可以写自定义脚本，#F{$dp.$D(\'endTime\')||currentTime()}，当结束时间为空时，将调用 currentTime()来获取当前时间

refreshEndDate

此方法仅为让endtime与starttime保持一致

===

$('#accessToken').mousedown(function(e){
   if(3 == e.which){
      oncontextmenu = function(){return false;}
      Test.Test("已复制到剪贴版");
      var range = document.createRange();
      range.selectNode(this);
      window.getSelection().addRange(range);
      document.execCommand("copy");
      setTimeout(function(){oncontextmenu = function(){return true;}},'200')
   }
})

首先这个是右击后复制文字内容，第一步禁用右击出现的弹框，2选中文字 3执行系统命令拷贝 4恢复弹框

自定义土司

var Test = {};Test.Test = function(msg) {var active = "Test-active";var div = document.createElement("div");div.classList.add("Test-container");div.innerHTML = '<div class="Test-message-container">' + msg + "</div>";div.addEventListener("webkitTransitionEnd", function() {    div.classList.contains(active) || div.parentNode.removeChild(div)});document.body.appendChild(div);div.offsetHeight;div.classList.add(active);setTimeout(function() {    div.classList.remove(active)}, 1500)}

.Test-container {
  position: relative;
  z-index: 9999;
  bottom: 50px;
  width: 100%;
  -webkit-transition: opacity .8s;
  transition: opacity .8s;
  opacity: 0
}

.Test-container.Test-active {
  opacity: 1
}

.Test-message-container {
  font-size: 14px;
  width: 170px;
  margin: 5px auto;
  padding: 5px;
  text-align: center;
  color: #FFF;
  border-radius: 7px;
  background-color: #FF8434
}

调用

Test.Test("已复制到剪贴版");

c=$("a[type='button']:not(:hidden)").click()|$("button:not(:hidden)").click();

寻找可见的按钮触发点击事件

===

var isgo=true;
$('input').focus().blur().each(function(i,e){
   if(!~$(".differr").attr("class").indexOf("hide")){
      if($(e).val())$($('input')[i+1]).focus();else $(e).focus();
      isgo = false;
      return false;
   }
});
if(!isgo){return;}