jQuery学习之路:初识Jq

1.什么是jQuery?

jQuery是一个简单,快速的JavaScript框架,浏览器兼容性良好,是一个优秀的代码库,可以以更少的代码,做更多的事情!

2.jQuery和JavaScript

前面说了,jQuery是一个JavaScript库,那说明jQuery的核心代码就是JavaScript!

3.为什么要学习jQuery?

网络上有大量的开源JS框架,jQuery是非常流行的JS框架,而且有大量的扩展,很多开发者/公司都在使用jQuery!

3.jQuery怎么下载?怎么安装?

下载:Jq的下载可以通过官网:点击进入jQuery官网下载,也可以通过其他地方下载,也可以使用CDN!

安装:下载好JQ后会得到一个:"jquery-1.10.2.js"文件,跟引入JavaScript一样!例如:

<script src="jquery-1.10.2.min.js"></script>

3.jQuery的使用

前面说了,JQ是一个强大的JavaScript库,以更少的代码,做更多的事情,那么jQuery代码对比原生JavaScript代码有啥区别呢?

我们看以下代码:

/*
用JavaScript和jQuery获取属性ID值
*/

//原生JavaScript:
function(){
    var byid = document.getElementById("ID名");
}

//jQuery:
function(){
    var byid = $("#ID名");
}

是不是jQuery代码比JavaScript代码假单呢?是,但是可能有人会想:jQuery这么简单,那我还用JavaScript干嘛?这个想法是错误的,为啥呢:前面说了jQuery是JavaScript库,也就是说jQuery是JavaScript代码编写的,所以:JavaScript不会被jQuery取代!

 

4.jQuery的写法

//第一种
$(document).ready(function () {
    alert("hello");
});
//第二种
jQuery(document).ready(function () {
    alert("hello");
});
//第三种
$(function () {
    alert("hello");
});
//第四种
jQuery(function () {
    alert("hello");
});

OK,什么是jQuery,以及jQuery的简单语法就先介绍到这里,大家快去学习吧,加油哦~~

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)查找id号为tigerLily的元素 (2)查找拥有类myList的元素 (3)查找所有的input元素 (4)查找所有img元素和tr元素 (5)查找id号为coffeePot和id号为someDiv的元素 (6)选择具有id属性的所有元素 (7)选择具有id属性的input元素 (8)选择其value属性等于A的元素 (9)选择其value属性等于A或等于C的元素 (10)选择其title属性值中含有dog的img元素 (11)选择其href属性值以http开头的a元素 (12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的直接子元素 (14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数的input元素 (18)选择非最后一行的tr元素 (19)选择所有的checkbox元素 (20)选择所有被选中的表单元素 (21)选择含有1972的td元素 (22)选择包含有sapn元素的div元素 (23)选择表格中每行的第一个单元格和最后一个单元格 (24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)将拥有alt属性的倒数第二个图片元素应用yellow类 (2)将第一个checkbox表单元素应用.green样式 (3)求id值为checkbox3的元素在所有表单元素里的顺序号 (4)用一条链式语句完成:先对所有img元素应用seeThrough样式,再为所有img元素和tr元素应用yellow样式 (5)用filter方法实现:选择单元格内容为Java或Smalltalk的单元格 (6)取图片集中的第2,3,4张图片 (7)用has方法实现:选择那些包含有ul元素的li元素 (8)将tbody每个单元格里的文字设为:我爱jQuery (9)查找form元素的后代元素中标签为label的元素 (10)查找表单元素中是否有id值为checkbox5的元素 提示: 为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

阿沅lmo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者