2. it技术
  3. jQuery学习笔记01入口函数、调用类及数组等

jQuery学习笔记01入口函数、调用类及数组等

it2024-01-14  75

1、初识，一个简单的演示

jQuery核心函数： / j Q u e r y j Q u e r y 核 心 对 象 ： 执 行 /jQuery jQuery核心对象：执行 /jQueryjQuery核心对象：执行()返回的对象

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script>//引入jquery库 <script type="text/javascript"> jQuery(function(){//载入页面，绑定文档加载完成的监听,使用jQuery核心函数（$/jQuery）jQuery可以替换成“$” $("#but2").click(function(){//给but2绑定监听 var username=$(".username").val()//直接使用$获取id或类元素 console.log(username); }) }) </script> <head> <title>testScript</title> </head> <body> 用户名：<input type="text" class="username"> <button id="but1">确定（原生版）</button> <button id="but2">确定（jQuery版）</button> </body> </html>

打印输入的文本

更清晰的写法

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> jQuery(function(){//载入页面，绑定文档加载完成的监听,使用jQuery核心函数（$/jQuery）jQuery可以替换成“$” var $btn2=$("#but2") $btn2.click(function(){//给but2绑定监听 var username=$(".username").val()//直接使用$获取id或类元素 console.log(username); }) }) </script> <head> <title>testScript</title> </head> <body> 用户名：<input type="text" class="username"> <button id="but1">确定（原生版）</button> <button id="but2">确定（jQuery版）</button> </body> </html>

2、添加一个新的html元素

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function(){ $("#but1").click(function(){ $("<input type='text' name='newtext'/><br/>").appendTo($("#mydiv")); }) }); var myarray=["hello "," world "," ha ppy"]; $.each(myarray,function(index,item){ console.log(index+"--"+$.trim(item)); }) var str=" happy birtday "; console.log("---"+str.trim()+"---"); </script> <head> <title>testScript</title> </head> <body> <div id="mydiv"> <button id="but1">测试</button> <br/> <input type="text" id="text1"/><br/> <input type="text" id="text2"/><br/> </div> </body> </html>

打印： 0–hello 1–world 2–ha ppy —happy birtday—

3、jQuery中对应原生JavaScript的onload写法（入口函数的写法）

原生写法：

window.onload=funciton (event){ }

jQuery写法：

$(document).ready(function (){ ..... }); //或 $(function (){ ..... });

4、通过jQuery获取img元素的宽高

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(document).ready(function (){ var $img=$("img")[0]; console.log($img); var $width=$img.width; console.log($width); }); </script> <head> <title>testScript</title> </head> <body> <div id="mydiv"> <ul> <li><a href="#">我是谁</a></li> <li><a href="#">我到底是谁</a></li> <li><a>我才不管你是谁</a></li> <li><img src="images/img2.PNG"/></li> </ul> </div> </body> </html>

打印：90

5、添加一个新的子标签

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ var $mydiv=$("#mydiv"); //接受一个标签 var $myp=$("<P>这里有一个新的段落</P>"); //追加一个字标签 $mydiv.append($myp); var span=document.getElementById("myspan"); console.log(span); //接受一个dom元素 var $myspan=$(span); console.log($myspan); }); </script> <head> <title>testScript</title> </head> <body> <div id="mydiv"> </div> </body> </html>

6、原生方法调用类方法和实例方法

<script type="text/javascript"> //创建一个类 function NormalClass(){ } //创建类的方法 NormalClass.staticMethod=function (){ console.log("this is a static method"); } //调用类方法 NormalClass.staticMethod(); //创建一个实例方法 NormalClass.prototype.instanceMethod=function(){ console.log("this is a instance method"); } //创建一个实例并调用实例方法 var newInstance=new NormalClass(); newInstance.instanceMethod(); </script>

打印： this is a static method this is a instance method

7、原生方法遍历数组，jQuery方法遍历数组和伪数组对象

<script type="text/javascript"> //创建数组 var myarray=[3,44,6,8,9,4]; //创建一个伪数组对象 var obj={0:23,1:44,2:56,3:454,length:4} //遍历数组 myarray.forEach(function(value,index){ console.log(index+":"+value); }) console.log("------------"); $(function (){ //遍历数组 $.each(myarray,function (value,index){ console.log(index+":"+value); }) console.log("------------"); //遍历伪数组对象 $.each(obj,function(value, index){ console.log(index+":"+value); }); }); </script>

8、原生map方法遍历数组，jQuery的map方法遍历数组和伪数组对象

<script type="text/javascript"> //创建数组 var myarray=[3,44,6,8,9,4]; //创建一个伪数组对象 var obj={0:23,1:44,2:56,3:454,length:4} //原生map方法遍历 myarray.map(function(value,index,array){ console.log(index+":"+value+"--"+array); }) console.log("----"); $(function (){ $.map(myarray,function(value,index){ console.log(index+":"+value); }) console.log("----"); //map方法不仅可以遍历，还支持对遍历后的数组进行处理 var newmap=$.map(obj,function(value,index){ console.log(index+":"+value); return index+value; }) console.log("==="); console.log(newmap); }); </script>

9、jQuery入口函数的挂起和解除挂起

<html> <style type="text/css"> </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $.holdReady(true);//暂时挂起入口函数的执行 $(function (){ console.log("入口函数准备就绪"); }); </script> <head> </head> <body> <button>点击</button> <script type="text/javascript"> var mybut=document.getElementsByTagName("button")[0]; mybut.onclick=function(){ alert("here is to pasue"); $.holdReady(false);//解除入口函数的挂起 } </script> </body> </html>

10、empty、parent、contains、has选择器

<script type="text/javascript"> $(function (){ //选择所有为空的div，.css是直接使用css样式 //empty：既没有文本内容，也没有子元素的指定元素 $("div:empty").css({ backgroundColor:"red"//这里的属性和css略微有些差异 }); //parent，有文本内容或者子元素的指定元素 $("div:parent").css({ backgroundColor:"blue" }); //:contains(text)包含指定text文本的指定元素 $("div:contains('我的内容显示')").css({ backgroundColor:"yellow" }) //:has(selector)包含指定选择器的指定元素 $("div:has('span')").css({ backgroundColor:"pink" }) }); </script>
最新回复(0)