JavaScript与JQuery框架基础入门教程 JavaScript与JQuery框架基础入门教

一，JS对象
二，DOM

–1，作用
–2，测试

三，Jquery

–1，概述
–2，使用步骤
–3，入门案例
–4，jQuery的文档就绪

四，JQuery的语法

–1，选择器
–2,常用函数
–3,常用事件
–4,练习

总结

一，JS对象

测试 js的创建对象 - 锐客网

二，DOM
–1，作用
使用document对象的各种方法属性。解析网页里的各种元素。
按照id获取元素-----getElementById(“id属性的值”)
【JavaScript与JQuery框架基础入门教程】按照name获取元素-----getElementsByName(“name属性的值”)
按照class获取元素-----getElementsByClassName(“class属性的值”)
按照标签名获取元素-----getElementsByTagName(“标签名”)
在浏览器输出-----write(“要展示的内容”)
innerHtml
innerText
style

–2，测试

测试 DOM解析网页元素 - 锐客网我是div1我是div2我是div3我是a1我是a2我是p1
我是p2

三，Jquery
–1，概述
用来简化JS的写法，综合使用了HTML css js。
语法： $(选择器).事件

–2，使用步骤
先引入jQuery的文件：在HTML里使用script标签引入
使用jQuery的语法修饰网页的元素

–3，入门案例

测试 jq语法 - 锐客网你是p2

–4，jQuery的文档就绪

测试 jq的文档就绪 - 锐客网我是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,练习