引出 模拟:
$是函数名 例子
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">//自定义方法function $(domId){var obj=document.getELementById(domId);return obj}//单击按钮 获取文本框的value框function fun1(){//通过js中的id获取dom对象//var obj=document.getElementById("txt1");var obj=$("txt1");alert(obj.value);}function fun2(){//通过js中的id获取dom对象var obj=document.getElementById("txt2");//var obj=$("txt2");alert(obj.value);}</script></head><body><input type="text" id="txt1" value="我是txt1"/><br/><input type="text" id="txt2" value="我是txt2"/><br/><input type="button" value="单击按钮1" onclick="fun1()"/><br/><input type="button" value="单击按钮2" onclick="fun2()"/></body></html>
一、Jquery第一个例子
<!DOCTYPE html><html><head><meta charset="utf-8"><title>第一个例子</title><!-->指定jquery的库文件位置，使用相对路径，当前项目的js目录下指定的文件--><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">/*1.$( document) ,$是jQuery中的函数名称, document是函数的参数作用是document对象变成jQuery函数库可以使用的对象。2.ready:是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后|会执行ready函数的内容。ready相当于js中的onLoad事件3.function()自定义的表示onLoad后要执行的功能。*//* 标准写法 */$(document).ready(function()){//自定义功能代码alert("Hello Jquery")})/* 简略写法*/$(function(){alert("hello jQuery")})</script></head><body></body></html></head><body></body></html>
二、DOM对象和Jquery对象
2.1. dom对象和jquery对象
dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;
jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。
dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以
2.2dom对象转为jquery对象
<!DOCTYPE html><html><head><meta charset="utf-8"><title>dom对象转为jquery对象</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function btnClick(){//-------------------------------------------------------------------//获取dom对象var obj=document.getElementById("btn");//使用dom的value属性，来获取值alert("使用dom对象的属性="+obj.value)//-----------------------------------------------------------------------------//把dom对象转jquery,使用jquery库中的函数var jobj= $(obj);//调用jquery中的函数，获取value值alert(jobj.val())//--------------------------------------------------------------}</script></head><body><input type="button" id = "btn" value="我是按钮" onclick="btnClick()"/></body></html>
2.3jquery转dom对象
<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function btnClick(){//使用jquery获取页面中的dom对象//var obj=$("#txt")[0];//从数组中获取下标是0的dom对象var obj=$("#txt").get(0)//从数组中获取下标是0的dom对象var num =obj.value;obj.value=num*num;}</script></head><body><input type="button" id = "btn" value="计算平方" onclick="btnClick()"/><input type="text" id = "txt" value="整数"/></body></html>
3、基本选择器的使用
常用的选择器：
1） id选择器， 语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(“.class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $(“标签名称”)
使用标签名称定位dom对象的
3.2表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单
若有收获，就点个赞吧
0 人点赞
