jQuery学习教程,写更少的代码,做更多的事情(一)

jQuery学习必须具备html、JavaScript和CSS的知识储备。

文章目录

  • 1.jQuery介绍
  • 2.jQuery基础选择器
        • 1. * 号选择器
        • 2. class选择器
        • 3.标签元素选择器
        • 4.id 选择器
        • 5.多个指定元素选择器
  • 3.属性选择器

1.jQuery介绍

概念:

jQuery是一个优秀的JavaScript库,而非JavaScript。它是轻量级的库。

兼容性:

兼容css3,以及各种浏览器。

安装包下载:

jQuery官网中下载安装包。

jQuery有两个版本:
1.x–>兼容低端浏览器
2.x–>兼容从IE9开始以及高端浏览器
下载的时候选择2.x就可以。
提醒一点,点击下载可能会出现一堆代码网页,正常!保存(ctrl + s)这个网页就可以了
保存网页后就是一个压缩包,将压缩包放到相应项目就可以了。
下载完成导入项目时,一定注意一下一点:
jQuery学习教程,写更少的代码,做更多的事情(一)_第1张图片

jQuery语法格式:

$( selector ).action( )
(1) 美元符号$定义jQuery。
(2) 选择符(selector) “查询”和“查找”HTML元素。
(3) jQuery的action()执行对元素的操作。

2.jQuery基础选择器

1. * 号选择器

All Selector (" * “)
语法:
$(”*")
描述:
选择所有元素。
注意:
由于使用*选择器获取的是所有元素,所以很慢

例如:




	
	
	


	

2. class选择器

Class Selector(".class")
语法:
$(".class")
描述:
选择给定样式类名的所有元素。

例如:




	
	
	


	

3.标签元素选择器

Element Swclector(“element”)
语法:
$(“element”)
描述:
根据给定(html)标记名称选择所有的元素。

例如:




	
	
	


	

4.id 选择器

ID Selector("#id")
语法:
$("#id")
描述:
选择一个具有给定id属性的单个元素。id属性是唯一!!!

例子:




	
	
	


	

5.多个指定元素选择器

Multiple Selector(“selector1,selector2,selector3”)
语法:
$(“selector1,selector2,selector3”)
描述:
将每一个选择器匹配到的元素合并后一起返回。

例如:




	
	
	


	

3.属性选择器

属性选择器有多种语法格式:
这里只是简单介绍三种,其他的可以看图片,很简单。
第一种格式:
$("[attribute | =‘value’]")
就是指定属性位置,来改变元素内容。

例如:




	
	
	


	



第二种
$("[attribute *= ‘value’]")

第三种
$("[attribute~=‘value’]")
在属性中的值中匹配value,是否有一样的。

例如:




	
	
	


	
	
	
	



jQuery学习教程,写更少的代码,做更多的事情(一)_第2张图片

属性选择器图1

jQuery学习教程,写更少的代码,做更多的事情(一)_第3张图片

属性选择器图2

jQuery学习教程,写更少的代码,做更多的事情(一)_第4张图片

属性选择器图3

你可能感兴趣的:(前端基础语言,javascript,css,html,js,jquery)