jquery 常用方法

最新推荐文章于 2022-04-15 22:48:45 发布

海天天海

最新推荐文章于 2022-04-15 22:48:45 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013794004/article/details/75645591

本文深入探讨了jQuery库中常用的方法及其应用场景，包括DOM元素的选择、属性操作、事件绑定等功能，并通过实例展示了如何利用jQuery简化JavaScript开发过程。

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<link href="favicon.ico" rel="icon" type="image/x-icon" />

<title>智造家</title>
<style type="text/css">
table{border:1px solid #F00}
</style>
<script src="plugins/jquery/js/jquery-3.2.1.min.js"></script>

</head>
<body>
<script type="text/javascript">
"use strict" //严格的校验
//带括号（）的自动加载
var funx=function(){console.log("带括号（）的自动加载........");}();
var arrayA=new Array();
var arrayB=[{"name":"limeng","email":"xfjylimeng"},{"name":"hehe","email":"xfjylimeng"}];
//$.each的用法
$.each(arrayB,function(i,n){
console.log("$.each的用法")
console.log("索引:"+i+"对应值为："+n.name);
});
//for in 迭代
var index;
for ( index in arrayB) {
console.log("for in 迭代");
console.log("element=="+arrayB[index].name);
}
//扩展两个方法
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});
$.extend({
setTimeout:function(func,secconds){
setTimeout(func,secconds);
}
});
console.log("$.extend扩展方法");
console.log($.min(2,3));

console.log(arrayA);

//内部方法的书写，暴露外部的调用方法
"use strict";

var pro=function(){
var _sayHelloe=function(){
alert("sayHelloe")
}
var _show=function(){
alert("show")
}
return {say:_sayHelloe,show:_show};
}();
pro.show();

//prop 和attr的区别
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

var alertObjec={
alert:function(msg){
alert(msg);
},
show:function(){
alert("111111");
}
};

//=== 三个等号类型必须一样，然后才会进行比较
//== 两个等号只要值相等就行不参与类型比较，因为script 都是var
//typeof(relAttr) === 'undefined'
var relAttr;
alert("oooooooooooooo"+typeof(relAttr));
if(typeof(relAttr)==null){
alert("oooooooooooooo");
}

var obj="string";
alert("==="+typeof obj);
if(typeof obj === "string"){
alert("===");
}
if(typeof obj == "string"){
alert("==");
}

$(function(){
var attr= $("#checkbox").attr("checked");
var prop=$("#checkbox").prop("checked");
var p=$("#checkbox").prop("p");
var p2=$("#checkbox").attr("p");
var attr1= $("#checkbox1").attr("checked");
var prop1=$("#checkbox1").prop("checked");
console.log(attr+"======="+prop+"==="+p+"=="+p2);
console.log(attr1+"======="+prop1);
$("#checkbox").removeAttr("id");
$("#checkbox").removeClass("tggt");
$("#checkbox").addClass("tggt");
//table 底下找东西
var inputId=$("table tr td input").attr("id");
console.log("标签选择器"+inputId);
//类选择器
$(".class");
//id选择器
$("#id");
$("#id input");
$("input[type='checkbox']");
$("input[name='checkbox']");
$("#roleDetail_PrivilegeList input[type='checkbox']:checked").each(function() {
var operatePermission = {};
operatePermission.permissionId = $(this).attr("id").replace("privilege_", "");
operatePermissionRls.push(operatePermission);
});
//. 方法的连写
$("#1").val("hu").bind('click',function(){
alert($(this).val());
});
//is 判断是否可见
console.log($("#1").is(":visible"))
// is 判断类型
console.log($("#1").is("input"))

//js 辅助方法
var stringStr="aa,bb";
var changeStr="";
console.log(stringStr.indexOf("a")+"====90");//查询某个字符串的索引
console.log(stringStr.lastIndexOf("a")+"====90")
changeStr=stringStr.split(",").join("@");//拆分后组成字符串
console.log(changeStr+"====92");
console.log(stringStr+"====93");
changeStr=stringStr.replace("a","b");
console.log(changeStr+"====95");

//正则表达式校验

var reg = /^[\u4e00-\u9fa5a-zA-Z0-9]*$/g;//常规字符包括英文和数字
if("1232".match(reg)==null){
console.log("no");
}else{
console.log("ok");
}

alertObjec.alert("lalalalalalll");

});

$.setTimeout('alert(333333333)',5000);
//setTimeout('alert(333333333)',5000);
function show(){
alert("333333333");
}

//call js 对象的继承
function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}

function Cat(name){
Animal.call(this, name);
}

var cat = new Cat("Black Cat");
console.log(cat.showName());

var Odiv=document.createElement("div"); //创建一个div
var Ospan=document.createElement("span"); //创建一个span
Odiv.style.cssText="width:200px;height:200px;background:#636363;text-align:center;line-height:220px"; //创建div的css样式
//Odiv.id="box"; //创建div的id为box
//Odiv.className="Box"; //div的class为Box
Odiv.appendChild(Ospan); //在div内创建一个span
document.body.appendChild(Odiv); //在body内创建一个div

</script>

<div id="bb">
<input type="checkbox" id="checkbox" checked="checked" p="name" class="tggt" >
<input type="checkbox" id="checkbox1" checked >

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <input id="1" type="test"> <span id="2"></span></td>
<td> <input id="3"> <span id="4"></span></td>
</tr>
</table>
</div>

</body>
</html>