jQuery入门学习

最新推荐文章于 2024-05-16 22:17:54 发布

do_more_world

最新推荐文章于 2024-05-16 22:17:54 发布

阅读量453

点赞数

分类专栏：好好学习天天向上文章标签： jQuery html java

本文链接：https://blog.csdn.net/ArrHeader/article/details/80414321

版权

好好学习同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

天天向上

1 篇文章 0 订阅

订阅专栏

以下都是笔记和自己总结的一些观点

不喜勿喷

--------分割线----------------------------------------------

JavaScript是基本语法，jQuery是在JavaScript基础上开发出来的框架，是目前比较流行的JavaScript程序库，比javascript更快，设计思想是write less,do more(少说多做)。

话不多说，先看例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery</title>
<!-- 这里是导入jQuery包  -->
<script src="js/jquery-3.0.0.min.js" type="text/javascript"></script>
</head>
<!-- 这边放jQuery函数 -->
<script>
	function test(){
		var $a = $("#div1");
		$a.html("<p>你好，jQuery!</p>");
	}
</script>
<body>
<!-- button 按钮 onclick事件 点击事件 -->
<input type="button" οnclick="test()" value="你好，jQuery!"/>	
<div id="div1"></div>
</body>
</html>

先导入jQuery包，在通过jQuery的方法来实现输出文本框。我是通过id选择器找到div，通过 var $a = $("#div1"); 将#div1的对象赋给$a,再通过html方法实现输出文字。

--导包----

这里面不放文字

</script>

--另起一个script块--

这里放函数函数

</script>

后面的js代码块定义都用<js></js>代替

jQuery的声明，与js一致不同的是用"$"符号声明。

var $h1 = $("h1"); ==>等价于 var jQueryh1 = jQuery("h1");

语言特点：边运行边解析

一.选择器

js里的选择器有一下几种：

document.getElementById("id标签");

document.getElementByClassName("类标签");

document.getElementByTagName("节点标签");（每一个元素相当于一个节点）

jQuery就有很多，升华了标签选择器.

一.类css选择器

1.类CSS选择器

1.1.基本选择器

1.2层次选择器

1.3属性选择器

2.过滤选择器

2.1基本过滤选择器

2.2可见过滤选择器

-----------------------------------------------------------------------------------

十分重要，不可言喻。

类CSS选择器

element , id , class , select1,select2 , element.class , *

1.基本选择器

element 标签选择器

<h1>标签选择器</h1>

<js>alert($("h1").html());</js>

.class 类选择器

<p class="p1">这里是类选择器</p>

<js>alert($(".p1").html())</js>

#id id选择器

<span id="s1">这里是id选择器</span>

<js>alert($("#s1").html())</js>

.class,#id 并集选择器

<p class="p1">这里是并集选择器1</p>

<p class="p2">这里是并集选择器2</p>

<js>alert($("p1,p2"))</js>

p.class 交集选择器

<p class="p1">这里是交集选择器1</p>

<p class="p2">这里是交集选择器2</p>

<js>alert($("p.p1"))</js>

* 全局选择器

<js>alert($(*).html())</js>

层次选择器

后代选择器 ancestor descendant

$("p a"); 选择p标签里所有子标签的a标签

子选择器 parent>child

$("p>a");选择p标签里的子标签a

--------------------------------------------------------------------

jQuery DOM操作 *

do_more_world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门学习

以下都是笔记和自己总结的一些观点不喜勿喷--------分割线----------------------------------------------JavaScript是基本语法，jQuery是在JavaScript基础上开发出来的框架，是目前比较流行的JavaScript程序库，比javascript更快，设计思想是write less,do more(少说多做)。话不多说，先看例子。&l...
复制链接

扫一扫