JavaScript学习——jQuery

最新推荐文章于 2024-10-14 09:30:00 发布

原创最新推荐文章于 2024-10-14 09:30:00 发布 · 169 阅读

CC 4.0 BY-SA版权

3 篇文章

订阅专栏

本文介绍jQuery的基本使用方法，包括通过本地或CDN引入jQuery，如何确保DOM加载完成后执行jQuery代码，以及jQuery的选择器和操作方法。同时展示了设置CSS样式的简单示例。

提起做前端，如果不知道jQuery怕是比不知道HTML5更让人吃惊。。。导致自己从来不敢说自己学过前端。

jQuery有下载到本地和直接利用CDN内容分发网络两种应用方式。jQuery必须等浏览器加载完HTML的DOM对象之后才能够执行，可以通过.ready()方法可以确定组件完成加载。基本架构如下：

jQuery(document).ready(function(){
    //对应代码
});

由于使用的频繁性，代码头的jQuery可以由'$'字符代替

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

更有甚者，直接采用更加简洁的写法

$(function(){
    //代码
});

其实从jQuery这个名字基本语法和CSS类似。包含了选择器和操作两个部分

$(选择器）.操作()

选择器分为标记选择器、id选择器(#)、class选择器(.)三种。同样jquery的搜寻可以采用嵌套搜寻（$("div p"))，精准定位。

$("p")        //HTML标记
$("#try")    //id
$(".try")    //class

表示法	说明
$("*")	选择所有组件
$(this)	选择目前作用中的组件
$("p:first")	选择第一个<p>组件
$("[href]")	选择有href属性的组件
$("tr:even")	选择偶数<tr>组件
$("tr:odd")	选择奇数<tr>组件
$("div p")	选择<div>组件里面包含的<p>组件
$("div").find("p")	选择<div>组件里面的<p>组件
$("div").next("p")	搜寻<div>组件之后的第一个<p>组件
$('li').eq(2)	搜寻第3个<li>组件，eq()里的值表示组件的位置，只能输入整数

设置CSS样式属性

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