JavaScript与JQuery框架基础入门教程

目录

• 一，JS对象
• 二，DOM
• –1，作用
• –2，测试
• 三，Jquery
• –1，概述
• –2，使用步骤
• –3，入门案例
• –4，jQuery的文档就绪
• 四，JQuery的语法
• –1，选择器
• –2,常用函数
• –3,常用事件
• –4,练习
• 总结

一，JS对象

二，DOM

–1，作用

使用document对象的各种方法属性。解析网页里的各种元素。

按照id获取元素-----getElementById(“id属性的值”)

按照name获取元素-----getElementsByName(“name属性的值”)

按照class获取元素-----getElementsByClassName(“class属性的值”)

按照标签名获取元素-----getElementsByTagName(“标签名”)

在浏览器输出-----write(“要展示的内容”)

innerHtml

innerText

style

–2，测试

	
		
		
		
	
	
		
我是div1
		
我是div2
		
我是div3
		我是a1
		我是a2
		
我是p1
		
我是p2
	

三，Jquery

–1，概述

用来简化JS的写法，综合使用了HTML css js。

语法： $(选择器).事件

–2，使用步骤

先引入jQuery的文件： 在HTML里使用script标签引入

使用jQuery的语法修饰网页的元素

–3，入门案例

	
		
		
		
		
		
		
	
	
		
你是p2
	

–4，jQuery的文档就绪

	
		
		
		
		
		
	
	
		
我是h1
	

四，JQuery的语法

–1，选择器

标签名选择器： $(“div”) – 选中div

id选择器： $("#d1") – 选中id=d1的元素

class选择器： $(".cls") – 选中class=cls的元素

属性选择器： $("[href]") – 选中有href属性的元素

高级选择器： $(“div.d3”) – 选中class=d3的div

–2,常用函数

text() html() val() — 获取或者设置值

hide() – 隐藏

$(“p”).css(“background-color”,“yellow”); --设置样式

show()—显示

fadeIn() — 淡入

fadeOut() — 淡出

–3,常用事件

单击事件–click !!!

双击事件–dblclick

鼠标移入事件–mouseenter

鼠标移出事件–mousleave

鼠标悬停事件–hover

键盘事件–keydown keyup keypress

–4,练习

	
		
		
		
		
		
		
	
	
		
我是div1
		
我是div2
		
我是div3
		
我是div4
		
我是p1
		
我是p2
		我是a1
		我是a2
		我是a3
	

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注脚本之家的更多内容！