JS+JQuery基础

HTML用来编排内容,CSS用来制定样式,JavaScript用来控制行为

我们是通过DOM(Document Object Model)-文档对象模型,它能使HTML和JavaScript紧密的结合在一起,它也叫做DOM树,每一个HTML元素都可以被定位。

获取用户输入:

JS+JQuery基础_第1张图片

获取用户输入,点击确定后调用alert函数

JS+JQuery基础_第2张图片

a little project:

用户通过input和textarea标签填写日记标题和内容,点击提交按钮就可以将数据显示在页面下方

引入script:


JS+JQuery基础_第3张图片



JS+JQuery基础_第4张图片

建立文本框

JS+JQuery基础_第5张图片

设置参数名称及值

JS+JQuery基础_第6张图片

getElementById方法

JS+JQuery基础_第7张图片

添加函数

JS+JQuery基础_第8张图片

Onclick的使用

JS+JQuery基础_第9张图片


JS+JQuery基础_第10张图片


JS+JQuery基础_第11张图片
JS+JQuery基础_第12张图片


JS+JQuery基础_第13张图片

以此种方式要写四遍相同的代码,可以使用全局变量来实现缩减语句:


JS+JQuery基础_第14张图片


JS+JQuery基础_第15张图片

取消alert直接再html页面显示


JS+JQuery基础_第16张图片


JS+JQuery基础_第17张图片

通过innerHTML在js中改变页面上元素显示的内容


JS+JQuery基础_第18张图片

以下是JQurey内容

jQuery是一个JS库,有“写的少,做的多”的特点,它包含HTML元素选取、元素操作等功能,也就是说可以代替getElementById来获取元素


JS+JQuery基础_第19张图片


JS+JQuery基础_第20张图片


JS+JQuery基础_第21张图片


JS+JQuery基础_第22张图片

这两句可以简化为:


JS+JQuery基础_第23张图片

注意onclick也有变了

你可能感兴趣的:(JS+JQuery基础)