jQuery基础入门(一)

jQuery是什么?

jQuery是一个JavaScript常用的工具函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

jQuery当中包含有以下一些常用功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

下面的内容当中,我们会逐一的介绍jQuery的常用内容。

学习jQuery的心态

  • 以练为主,多看多练
  • 以js为基础,更好的理解jQuery
  • jQuery只是js的一个函数库,不能忘记js

jQuery的版本问题

目前jQuery有三个大版本,1.xx 、 2.xx 和 3.xx ,三个版本当中,1版本兼容性最高,可以有效的兼容ie浏览器,
6,7,8,9都能得到一个很好的兼容,2版本则最低只能兼容到ie9,而3版本则彻底放弃了ie9以下的浏览器。但是却新增加
了很多的使用的方法,并且代码的安全性也增加很多,例如可以很好的防止xss攻击等。

jQuery的使用

首先,我们可以根据需要下载一个指定版本的jquery文件,当然也可以选择使用cdn文件。

js 官方网址: http://jquery.com/
常用CDN: 
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  百度CDN中的jQuery
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪

jQuery 中的核心语法

在jQuery当中,jQuery是一个核心方法,用来查找元素从而方便对元素的操作,可以简写为$

jQuery("#btn").click(function() {
        alert(123);
    });

// 上边的代码也可以改为
$("#btn").click(function(){
    alert(123)
})

基础语法

$(selector).action();
  • 美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

文档就绪函数

在js当中,存在一个window.onlaod = function(){} ,函数当中的代码会在整个文档加载完毕之后执行,而在jq当中
也有类似的方法,如下:

$(document).ready(function(){
    // jq 代码
});

// 上述代码也可以简写为:
$(function(){
    // jq 代码
})

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

jQuery 选择器

在jq当中,我们可以通过选择器任意的选取html元素,并且操作html元素。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

三个基础选择器如下:

$("p") 元素选择器
$("#d1") id选择器
$(".class") class选择器

还有一个常用的css选择器 .css(),可以用来帮助我们更改css样式。

$("#d1").css("background-color","red");

还有一些其他的选择器:

$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first")    选取第一个 <p> 元素
$("ul li:first")    选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
常用选择器可以访问: https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

jQuery事件

在jq当中,基本上所有的js事件都有一个对应的jq事件,下面是jq当中常用的事件。

鼠标事件:

  • click
  • dblclick
  • mouseenter
  • mouseleave

键盘事件:

  • keypress
  • keydown
  • keyup

表单事件:

  • submit
  • change
  • focus
  • blur

文档/窗口事件:

  • load
  • resize
  • scroll
  • unload

键盘事件的差异:

  • keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
  • keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码.
全部事件方法可以访问:https://www.w3cschool.cn/jquery/jquery-ref-events.html

 (未完待续...)

原文地址:https://www.cnblogs.com/yuwenxiang/p/11700328.html