jQuery入门

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了jQuery的基本概念，包括如何引入jQuery库、使用基本的选择器及jQuery对象与DOM对象的区别与转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery入门

$符号为jQuery的特点。

*.min.js 为js的压缩版也叫混淆代码

我们在学习java框架的时候是引用jar包学习前端框架就需要引用外部js

可以通过添加官网的外部js也可以通过本地的js

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> <!-- 引用官网的jQuery外部js文件 -->

<script type="text/javascript" src="jquery-2.2.4.js" ></script> <!-- 引用本地的  需要写全路径  如果在同一目录下可以不要写全路径-->

cdn分发内容系统

一些其它的cdn的分布

菜鸟教程cdn

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度cdn

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪cdn

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

谷歌cdn

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

微软cdn

<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

jQuery的语法

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

$(function(){
 
   // 开始写 jQuery 代码...   建议使用这个
 
});

JQuery的选择器

在之前的 css中我们就学过一些选择器 css有的选择器JQuery也有并且有所增强

元素选择器

$("标签") // 标签选择器也叫元素选择器

id选择器

$("#test") //需要填id  id是唯一的 关键字符#

类选择器

$(".test") //类选择器 用关键字 .

   // & 组合选择器
   $("a[my='jiaozi']");
   // || 组合选择器 ,隔开 
    $("a,[my='jiaozi']");

还有很多选择器如：

$("p:first")

选取第一个 <p> 元素

$("tr:even")

选取偶数位置的 <tr> 元素

$("tr:odd")

选取奇数位置的 <tr> 元素

.......参考runoob

JQuery对象和dom对象

jquery对象和dom对象有何区别

dom对象 document.getElementXX dom对象只能访问dom中预定义的方法 value innerHTML innerText .style.样式名=样式值

jquery对象就是通过 $()对象处理返回的对象该对象是数组只能调用jquery提供的方法比如 css text html val

$(function(){
          //dom对象 不能调用jquery方法 
      	  var mydiv=document.getElementById("mydiv");
          mydiv.style.color="red";
          var uname=document.getElementById("uname");
          mydiv.innerText=uname.value;
          //jquery对象不能调用dom对象的方法
          $("#mydiv").css("color","green");
          $("#mydiv").text($("#uname").val());
          
          //jquery对象和dom对象的互相转换
          //jquery对象转换成dom对象
          var divDom=$("#mydiv")[0];
          alert(divDom.innerText);
          
          //dom对象转换成jquery对象
          var mydiv=document.getElementById("mydiv");
          var jquerydiv=$(mydiv);
          
      })

dom对象和JQuery对象的转换

 //jquery对象和dom对象的互相转换
           //jquery对象转换成dom对象
          var divDom=$("#mydiv")[0];
          alert(divDom.innerText);
          
          //dom对象转换成jquery对象
          var mydiv=document.getElementById("mydiv");
          var jquerydiv=$(mydiv);