집 > 기사 > 웹 프론트엔드 > jQuery 도구 함수 구문 분석 예

jQuery 도구 함수 구문 분석 예

高洛峰원래의: 2016-12-03 10:53:581005검색

1. $.browser 객체 속성

속성 목록 설명

webkit 웹킷 관련 브라우저의 경우 true를 반환하고, Google 및 Maxthon과 같은 그렇지 않은 경우 false를 반환합니다.

Mozilla 관련 브라우저는 true를 반환하고, 그렇지 않으면 Firefox와 같이 false를 반환합니다.

safari 관련 브라우저는 true를 반환하고, safari

Opera와 같이 false를 반환합니다. 관련 브라우저는 true를 반환하고, 그렇지 않으면 false를 반환합니다(예: Opera

msie　　 msie 관련 브라우저는 true를 반환하고, 그렇지 않으면 false를 반환합니다(예: IE, 360, Sogou

버전) 해당 브라우저 버전을 반환합니다.

$(function () {
 if ($.browser.msie) {
 alert("IE浏览器");
 }
 if ($.browser.webkit) {
 alert("webkit浏览器");
 }
 if ($.browser.mozilla) {
 alert("mozilla浏览器");
 }
 if ($.browser.safari) {
 alert("safari浏览器");
 }
 if ($.browser.opera) {
 alert("opera浏览器");
 }
 alert($.browser.version);
})

2. boxModel

Boolean 값을 반환하며, W3C 박스 모델인 경우 true, 그렇지 않은 경우 false를 반환합니다.

박스 모델은 두 가지 범주로 나뉘는데, 하나는 W3C 박스 모델이고 다른 하나는 IE 박스 모델입니다. 둘 사이의 근본적인 차이점은 W3C 박스 모델은 패딩과 테두리를 포함하지 않고 콘텐츠의 높이와 너비만 참조하는 반면, IE 박스 모델은 패딩과 테두리를 포함한다는 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script src="jQuery.1.8.3.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  if ($.support.boxModel) {
  alert("W3C盒子模型!");
  }
  else {
  alert("IE盒子模型!");
  }
 })
 </script>
</head>
<body>
</body>
</html>

위의 예에서는 W3C 박스 모델이 팝업됩니다. 맨 위 두 줄을 삭제하면 ee21dc10f205b9f74617688f29fa356c 02365b1742a7b6aa9068d508e4a15bdd. 팝업되는 것은 IE 박스 모델입니다.

배열 및 객체 작업

3. $.each()

이 도구 함수는 지정된 배열의 순회를 완료할 수 있을 뿐만 아니라 요소의 순회도 실현할 수 있습니다. 페이지에서.

구문: $.each(obj,fn(para1,para2)) obj는 순회할 배열 또는 객체이고, fn은 순회된 각 요소에 대해 실행되는 콜백 함수이며, para1은 배열의 일련 번호를 나타냅니다. 또는 객체의 속성인 para2는 배열의 요소와 객체의 속성을 나타냅니다.

$(function () {
  var arr = [1, 2, 3, 4, 5];
  $.each(arr, function (index, value) {
  document.write(index + ":");
  document.write(value + "<br/>");
  });
 })
　　　　输出：
　　　　　　0:1
　　　　　　1:2
　　　　　　2:3
　　　　　　3:4
　　　　　　4:5
   
　  $.each()遍历数组。

$(function () {
  var arr = { "张三": "23","李四": 22,"王五": "21" };
  $.each(arr, function (index, value) {
  document.write(index + ":");
  document.write(value + "<br/>");
  });
 })
　　　　输出：张三:23
　　　　　　　李四:22
　　　　　　 王五:21

요소 순회

<head>
 <title></title>
 <script src="jQuery.1.8.3.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  $("p").each(function () {
  $(this).css("background-color", "red");
  });
 
　　　　　　　//一下三行代码与以上三行效果一样
  //$.each($("p"), function () {
  // $(this).css("background-color", "red");
  //})
 })
 </script>
</head>
<body>
 <p>我是第一个P</p>
 <p>我是第二个P</p>
 <p>我是第三个P</p>
 <p>我是第四个P</p>
 <p>我是第五个P</p>
</body>
</html>

4. $.grep()

조건을 충족하는 요소를 필터링하고 새 배열을 반환합니다.

구문: $.grep(Arrar,fn(value,index)); note 콜백 함수의 매개변수 순서는 첫 번째가 값이고 두 번째가 인덱스입니다.

　　　$.grep(Arrar,fn(value,index),[bool]); 세 번째 매개변수는 반전 여부를 나타내며, true는 반전을 의미하고, false는 반전을 의미하지 않습니다.

$(function () {
  var arr = [2, 5, 34, 22, 8];
  var arr1 = $.grep(arr, function(value, index) {
  return index <= 2 && value < 10;
  })
  document.write(arr1.join());　　//输出2,5
 })

6. $.map()

함수에서 데이터를 변경하고 배열 또는 배열을 허용합니다. like 객체를 매개변수로

$(function () {
  var arr = [2, 5, 34, 22, 8];
  var arr1 = $.map(arr, function (value, index) {
  if (value > 5 && index < 3) {
   return value - 10;
  }
  })
  document.write(arr.join() + "<br/>");　　//2,5,34,22,8　　可以看到原数组不改变
  document.write(arr1.join());　　　　　　　 //24　　新数组只获得了操作之后的结果
 })

7. $.inArray()

검색된 요소가 있는 경우 배열의 경우 반환되는 요소는 다음과 같습니다.

$(function () {
 var arr = [1, 2, 3, 4, 5];
 alert($.inArray(4,arr));　　//弹出 3
})

요소의 인덱스 검색 8. $.trim()

문자열 양쪽 공백 제거

$(function () {
 var str = " 你在他乡还好吗？ ";
 document.write("11" + str + "11" + "<br/>");　　//输出 11 你在他乡还好吗？ 11
 document.write("11" + $.trim(str) + "11");　　　//输出 11你在他乡还好吗？11　　　　//加个11是为了看清楚差别。
})

9. 테스트 작업

$.isArray(obj) 여부를 감지합니다. 매개변수가 배열입니다

$.isFunction(obj)　매개변수가 함수인지 감지

　　$.isEmptyObject(obj)　　매개변수가 빈 객체인지 감지

$.isPlainObject(obj)　　매개변수가 순수 객체인지, 즉 객체가 {} 또는 new Object() 키워드를 통해 생성되었는지 여부를 감지합니다.

　$.contains(container,contained)DOM 노드에 다른 DOM 노드가 포함되어 있는지 감지합니다. 그렇다면 true를 반환하고 그렇지 않으면 false를 의미합니다. 매개변수는 jQuery 객체가 아닌 DOM 객체입니다.

$(function () {
 var arr = [1, 2, 3, 2, 1];
 document.write(jQuery.isArray(arr));　　//返回true
 var str = "123";
 document.write(jQuery.isArray(str));　　//返回false
})
$(function () {
 var f = fun1;
 alert($.isFunction(fun1));　　//返回true
})
function fun1() { }
$(function () {
 var obj1 = {};
 var obj2 = { name: "张飞" };
 alert($.isEmptyObject(obj1));　　//返回true　　obj1是空对象
 alert($.isEmptyObject(obj2));　　//返回false　 obj2不是空对象
})
$(function () {
 var obj1 = {};
 var obj2 = { name: "张飞" };
 var obj3 = new Object();
 var obj4 = null;
 alert($.isPlainObject(obj1));　　//true　　通过{}创建
 alert($.isPlainObject(obj2));　　//true　　通过{}创建
 alert($.isPlainObject(obj3));　　//true　　通过new Object()创建
 alert($.isPlainObject(obj4));　　//flase　　不是通过{}或new Object()创建
})
$(function () {
 alert($.contains($("#div1")[0],$("#p1")[0]));　　//返回true，注意参数是DOM对象，并非jQuery对象
})

10. $.param()

URL 문자열로 직렬화됨

$. (obj,[bool]); 두 번째 매개변수는 얕은 직렬화 여부를 나타내는 선택적 매개변수입니다.

$(function () {
 var man = { Name: "张飞", Age: 23 };
 var str = $.param(man);
 document.write(str);　　　　　　//Name=%E5%BC%A0%E9%A3%9E&Age=23
 var str1 = decodeURI(str);
 document.write("<br>" + str1);　　//Name=张飞&Age=23
})

11 , $.makeArray ()

배열 또는 배열 유사 객체의 속성을 새 배열(실제로는 배열)에 복사하고 새 배열을 반환합니다.

var arr = [1,3,5,7,9];
$(function () {
 var arr1 = $.makeArray(arr);
 document.write(arr1.join());　　//输出 1,3,5,7,9
})

12. $.merge()

이 함수는 두 개의 배열 또는 배열 유사 객체를 허용합니다. 두 번째 매개변수가 첫 번째 매개변수에 추가되고 첫 번째 매개변수가 반환됩니다. 첫 번째 배열은 수정되지만 두 번째 매개변수는 수정되지 않습니다.

var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];
$(function () {
 var arr3 = $.merge(arr1, arr2);
 document.write(arr1.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
 document.write(arr2.join() + "<br/>"); //2,4,6,8,10
 document.write(arr3.join() + "<br/>"); //1,3,5,7,9,2,4,6,8,10
})

13. $.parseJSON()

이 함수는 문자열을 JSON 형식으로 구문 분석하고 구문 분석 결과를 반환합니다. (물체). JSON.parse()와 유사합니다. 참고: jQuery는 JSON 구문 분석 기능만 정의하고 직렬화 기능은 정의하지 않습니다.

var man = { name: "张三", age: 23 };
var str = JSON.stringify(man);
document.write(str + "<br/>"); //{"name":"张三","age":23}
var man1 = $.parseJSON(str);
document.write(man1.name + man1.age); //张三23

14. $.proxy()

Function 개체의 바인딩() 메서드와 유사하며 함수를 허용합니다. 첫 번째 매개변수로 객체를 두 번째 매개변수로 하고, 두 번째 매개변수 객체의 메소드로 호출될 새로운 함수를 반환합니다.

$(function () {
　　　　var obj = {
　　　　　　name: "John",
　　　　　　test: function () {
　　　　　　　　alert(this.name);　　　　//当id为test的按钮点击时，弹出姓名
　　　　　　　　$("#test").unbind("click", obj.test);　　//并取消事件绑定(下次再点击不会弹出姓名)
　　　　}
　　};
　　　　$("#test").click(jQuery.proxy(obj, "test"));　　//绑定object对象里面的方法test
　　})

15. $.unique(array)

요소 배열에서 중복 요소 삭제

$(function () {
 var arr = [1, 2, 3, 2, 1];
 jQuery.unique(arr);
 alert(arr.join());　　//返回　　3,2,1
})

16. $.extend()

객체의 요소 병합

　省略dest参数,extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去。

　　要特别注意的一点是：后面的值会覆盖前面同名的值。

$(function(){
 $.extend({
 hello:function(){alert(&#39;hello&#39;);}　　//该方法只有一个参数，意味着将hello方法合并到jQuery全局对象中去
 });
 $.hello(); //弹出 hello
})

　　命名空间示例：

$(function(){
 $.extend({net:{}}); //扩展一个命名空间
 $.extend($.net,{
 hello:function(){alert(&#39;hello&#39;);} //将hello方法绑定到命名空间net里去
 })
 $.net.hello(); //通过net命名空间调用方法
})

　拷贝方法原型：

extend(boolean,dest,src1,src2,src3...)

其中第一个参数boolean表示是否进行深层拷贝。

$(function(){
 var result=$.extend( true, {},
 { name: "John", location: {city: "Boston",country:"USA"} },
 { last: "Resig", location: {state: "MA",country:"China"} } );
 alert(result.location.state); //输出 MA
 //result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
 var result=$.extend( false, {},
 { name: "John", location: {city: "Boston",country:"USA"} },
 { last: "Resig", location: {state: "MA",country:"China"} } );
 alert(result.location.city); //输出 undefined
 //result={name:"John",last:"Resig",location:{state:"MA",county:"China"}} 注意没有city，只是合并了location,location里面的属性不管
})

성명：

이전 기사：JavaScript에서 두 변수의 값을 교환하는 7가지 솔루션다음 기사：JavaScript에서 두 변수의 값을 교환하는 7가지 솔루션

jQuery 도구 함수 구문 분석 예

관련 기사