初识jquery

最新推荐文章于 2020-02-22 20:52:32 发布

c_宇少

最新推荐文章于 2020-02-22 20:52:32 发布

阅读量155

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_40890612/article/details/82252917

版权

本文介绍了jQuery，它是轻量级JavaScript类库，具有兼容浏览器、面向集合、多行操作集于一行等优点。还阐述了使用jQuery的步骤，包括导入js库等，介绍了三种工厂方法、选择器、属性写法、事件写法等内容。

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

1. 什么是jQuery

它是一个轻量级的javascript类库（重量级的有ext.js）。
注1：就一个类“jQuery”，简写“$”,它是一个容器。

jQuery优点
(1)兼容浏览器
(2)总是面向集合
(3)多行操作集于一行

3.如何使用jQuery(hello jQuery)
3.1 导入js库

3.2 jquery(document).ready(fn)
$(document).ready(function(){ }); 简写：$ (fn)
匿名函数function(){}

jQuery三种工厂方法
工厂方法：实例化jQuery对象

4.1 jQuery(selector[,context])语法

$(“a”, document) //jquery选择器，作用：找对象
selector：选择器
context：上下文，环境/容器，documemt

4.1.1 选择器
元素选择器 $(“a”) 类选择器：.$ (“.a1”)
ID选择器：# $(“#a2”) 属性选择器：[]$ (“input[name=’btn’]”)
包含选择器：E1 E2 $(“p.a3”) 组合选择器：E1,E2,E3$ (“.a1,.a2”)
自定义选择器：:exp $("a",document)$ (“a”, “div”) == $(‘div a’) 匹配选择器：:eq(index)$ (“tr:eq(1)”) 选择tr标签中下标为1的对象
$(“tr:even”) 选择tr标签中下标为偶数的对象，从0开始

4.2 jQuery(html)
html：基于html的一个字符串。

案例：
====================================================

–请选择–

... $("input[name=’btn1’]").click(function(){ //将HTML文本追加到ID="s1"的对象中$ ("value").appendTo("#s1"); //在ID="s1"的对象中追加HTML文本 $("#s1").append("value2"); });
====================================================

4.3 jQuery(element)
element：js对象，表示一个html元素。
案例： $("a")$ (“td”)
jQuery属性写法
(1)无参数： $(“p”).text(); (2)参数val：$ (“p”).text(“Hello world!”);
(3)回调函数： $(“p”).text(function(n){ return “这个 p 元素的 index 是：” + n; }); (4)参数properties：$ (“img”).attr({
src: “test.jpg”,
alt: “Test Image”
});

jQuery常用属性：见API中属性目录。

jQuery事件写法：
$(“p”).click(function(){$ (this).hide();
});
console对象
console.log(“文字”); 输出普通信息