jQuery入门

来源：互联网发布：access数据库就业前景编辑：程序博客网时间：2024/06/05 21:13

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);

阅读全文

0 0