方法及示例分享,jQuery常用且重要方法汇总

1.HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

1.jquery  data(name)

offset()方法的定义和用法:

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

data() 方法向被选元素附加数据,或者从被选元素获取数据。

此方法返回或设置所匹配元素相对于document对象的偏移量。

2.如需从 JavaScript 访问某个 HTML 元素,您可以使用
document.getElementById(id) 方法

$("#btn1").click(function(){
 $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
 alert($("div").data("greeting"));
});

语法结构一:

3.可以通过document.write()向HTML文档写内容,包括标签。注意,如果在文档已加载完成后执行document.write(),整个HTML文档将会被覆盖

2.jquery arguments

$(selector).offset()
获取匹配元素在当前document的相对偏移。
返回的对象包含两个整型属:top和left。
此方法只对可见元素有效。
实例代码:

4.JS通过//和/**/两种方式注释

arguments是指向实参对象的引用,实参对象是一个类数组对象 .

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 border:1px solid black;
 width:400px;
 height:300px;
 padding:10px;
 margin:50px;
}
.children{
 height:150px;
 width:200px;
 margin-left:50px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是:"+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

5.变量通过var声明,因为JS是弱类型语言,所以可以不指定变量类型。

arguments 的索引 从 0, 1,2,….递增,与实参逐个对应.

以上代码可以弹出子div相对于document的偏移量。

  var x=1  //number

  var x="a" //字符串

  var x=true  //boolean

  var x  //x无值,undefined

arguments.length 属性代表实参的个数

语法结构二:

6.函数 使用function 定义

arguments一定不是数组, 是长的比较像数组的一个对象,虽然也有length属性

$(selector).offset(value)

  function 函数名(){

    函数体;

  }

arguments每个函数都会有,因此,arguemnts只会在内部找自身的arguments,无法引用到外层的arguments

设置匹配元素相对于document对象的坐标。
offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。
如果对象原先的position样式属性是static的话,会被改成relative来实现重定位。
参数列表:

7.var num=new Number()//申明一个Number对象

// 求圆形面积,矩形面积, 三角形面积
  function area () {
  if(arguments.length == 1) {
  alert(3.14 * arguments[0] * arguments[0]);
  } else if(arguments.length == 2) {
  alert(arguments[0] * arguments[1]);
  } else if(arguments.length == 3) {
  alert(arguments[0] + arguments[1] + arguments[2]);
  } else {
  return null;
  }
  }


//调用
  area(10,20,30);

参数 描述
value 规定以像素计的 top 和 left 坐标。

Number.MAX_VALUE 最大数值
Number.MIN_VALUE 最小数值
Number.NaN 特殊的非数字值
Number.NEGATIVE_INFINITY 负无穷大
Number.POSITIVE_INFINITY 正无穷大
Number.toExponential( ) 用指数计数法格式化数字
Number.toFixed( ) 采用定点计数法格式化数字
Number.toLocaleString( ) 把数字转换成本地格式的字符串
Number.toPrecision( ) 格式化数字的有效位
Number.toString( ) 将—个数字转换成字符串
Number.valueOf( ) 返回原始数值
8.var str = new String()    //申明一个字符串对象

3.jquery target()     event.target

可能的值:

  str.substr(start,length):在str中抽取并返回一个子串。但是它并不修改str,start表示抽取的开始位置,length表示长度,省略length,则表示抽取至末尾。

target 属性规定哪个 DOM 元素触发了该事件。

1.值对,比如 {top:200,left:10}。
2.带有top和left 属性的对象。

  str.substring(from,to):将返回字符串string的子串,由from到to之间的字符构成,
包括位于from的字符,不包括位于to的字符.如果from>to,就是自动调换后截取。

$("p, button, h1, h2").click(function(event){
 $("div").html("Triggered by a " + event.target.nodeName + " element.");
});
<p></p>
<button></button>
<h1></h1>
<h2></h2>
//当点击p标签的时候显示:点击事件由 P 元素触发
....

实例代码:

  Str.toLowerCase( ):把字符串转换小写

4.jquery trigger(event,[参1,参2,…])

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset({top:100,left:100})
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

  Str.toUpperCase( ):将字符串转换成大写

trigger()
方法触发被选元素的指定事件类型。(可自定义事件,可以传参)自定义事件非常重要且有用!

以上代码可以设置div相对于document的偏移量。

  str.split():安照指定的符号对字符串分割

 //myEvent为自定义事件名
    $("#p1").bind("myEvent",function(str1,str2) {
        alert(str1 + ' ' + str2); 
     }); 
     $("#p1").trigger("myEvent",["Hello","World"]); 
//也可以这样写:
    $("#p1").bind("myEvent",function(str1,str2) {
        alert(str1 + ' ' + str2); 
     }).trigger("myEvent",["Hello","World"]); 

语法结构三:

  str.slice():与substring()相同但要灵活,允许使用负值,与Array.slice()相似

5.js substring(start,stop)

使用函数的返回值来设置偏移坐标:

  str.concat():字符串链接,与Array.concat想似,但用+号更方便

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

$(selector).offset(function(index,oldoffset))
参数列表:

   str.indexOf():检索字符,返回字符首次出现的位置

substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。

参数 描述
function(index,oldvalue) 规定返回被选元素新偏移坐标的函数:
index – 可选。元素的索引。
oldvalue – 可选。当前坐标。

9.var date=new Date()       //创建一个日期对象

var str="Helloworld!"
document.write(str.substring(3,7))
//结果
lowo
var str="Hello world!"//有两个空字符
document.write(str.substring(3,7))
//结果
lo
//两者的结果有区别,字符串之间的空字符串占用索引!

实例代码:

主要的一些方法:

看清楚 没有r 这个stop处的字符!

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

  date.get/setDay()    //返回/设置一周中的某一天(0~6),

重要事项:与 slice() 和 substr() 方法不同的是,substring()
不接受负的参数。

以上代码同样可以设置元素的偏移,不过值是通过函数返回。

  date.get/setFullYear()  //返回/设置系统时间中的年份

6.js slice(start,stop)

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图