JavaScript与JQuery框架基础入门教程
目录
- 一，JS对象
- 二，DOM
- –1，作用
- –2，测试
- 三，Jquery
- –1，概述
- –2，使用步骤
- –3，入门案例
- –4，jQuery的文档就绪
- 四，JQuery的语法
- –1，选择器
- –2,常用函数
- –3,常用事件
- –4,练习
- 总结
一，JS对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 js的创建对象</title>
<script>
//2. 创建对象方式2：
var p2 = {
//绑定了属性
name:"张三",
age:19,
//绑定了函数
eat:function(a){
console.log(a);
}
}
console.log(p2);
p2.eat(10);//调用函数
//1. 创建对象方式1：
//声明对象
function Person(){}
//创建对象
var p = new Person();
//动态绑定属性
p.name="张三" ;
p.age=18 ;
//动态绑定函数
p.eat=function(){
console.log("吃猪肉");
}
//查看
console.log(p);
//调用函数
p.eat();
</script>
</head>
<body>
</body>
</html>
二，DOM
–1，作用
使用document对象的各种方法属性。解析网页里的各种元素。
按照id获取元素-----getElementById(“id属性的值”)
按照name获取元素-----getElementsByName(“name属性的值”)
按照class获取元素-----getElementsByClassName(“class属性的值”)
按照标签名获取元素-----getElementsByTagName(“标签名”)
在浏览器输出-----write(“要展示的内容”)
innerHtml
innerText
style
–2，测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 DOM解析网页元素</title>
<script>
function method(){
// 4. 获取标签名是p的
var d = document.getElementsByTagName("p");
d[0].innerHTML="hi...";
console.log(d[0].innerHTML);
// 3. 获取 class="f"
var c = document.getElementsByClassName("f");
c[0].innerHTML="hi...";
console.log(c[0].innerHTML);
// 2. 获取name="d"
var b = document.getElementsByName("d");//得到多个元素
// b[0].innerHTML="test..."; //修改第一个元素的内容
b[0].style.color="blue"; //修改第一个元素的字的颜色
console.log(b[0].innerHTML);//获取第一个元素的内容
// 1. 获取id="a1"
var a = window.document.getElementById("a1");//得到一个元素
// a.innerText = "<h1>hello</h1>" ; //修改内容
// document.write( a.innerText ); //直接向网页写出数据
// //innerText和innerHtml的区别？innerHtml能解析HTML标签
// a.innerHtml = "<h1>hello</h1>" ; //修改内容
// document.write( a.innerHtml ); //直接向网页写出数据
}
</script>
</head>
<body>
<div name="d" onclick="method();">我是div1</div>
<div name="d">我是div2</div>
<div class="f">我是div3</div>
<a href="#" id="a1">我是a1</a>
<a href="#" class="f">我是a2</a>
<p class="f">我是p1</p>
<p>我是p2</p>
</body>
</html>
三，Jquery
–1，概述
用来简化JS的写法，综合使用了HTML css js。
语法： $(选择器).事件
–2，使用步骤
先引入jQuery的文件： 在HTML里使用script标签引入
使用jQuery的语法修饰网页的元素
–3，入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 jq语法</title>
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 在网页中嵌入JS代码 -->
<script>
// 点击p标签，修改文字
function fun(){
//dom获取元素
var a = document.getElementsByTagName("p");//按照标签名获取元素
a[0].innerHTML="我变了。。。";//修改文字
//jq获取元素 -- jq语法： $(选择器).事件
$("p").hide();//隐藏元素
$("p").text("我变了33333。。。");//修改文字
}
</script>
</head>
<body>
<p onclick="fun();">你是p2</p>
</body>
</html>
–4，jQuery的文档就绪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 jq的文档就绪</title>
<!-- 1. 导入jq文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
//写法1的问题：想用的h1还没被加载，用时会报错
// 解决方案：写在h1加载之后 + 使用文档就绪函数(先导入jq)
// document.getElementsByTagName("h1")[0].innerHTML="我变了。。";
//写法2的：使用文档就绪函数(先导入jq)--是指文档都就绪了再用元素
$(document).ready(function(){
//document.getElementsByTagName("h1")[0].innerHTML="我变了。。";//js的dom写法
$("h1").text("我变了。。");//jq的写法
});
</script>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>
四，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,练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 jq的练习</title>
<!-- 1. 引入jq -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 使用jq语法做练习 语法：$(选择器).事件 -->
<script>
// jq文档就绪函数：：保证元素都被加载过了，就可以放心使用了，不然会报错
$(function(){
// 练习1：单击id=d1的元素，隐藏id=p1的
$("#d1").click(function(){
$("#p1").hide();
})
});
$(function(){
// 练习2：双击class="dd"的元素，给div加背景色
$(".dd").dblclick(function(){
$("div").css("background-color","green");
})
// 练习3：鼠标进入 id="d1"的div，隐藏有href属性的元素
$("#d1").mouseenter(function(){
$("[href]").hide();
})
});
</script>
</head>
<body>
<div id="d1">我是div1</div>
<div class="dd">我是div2</div>
<div>我是div3</div>
<div class="dd">我是div4</div>
<p id="p1">我是p1</p>
<p>我是p2</p>
<a class="dd">我是a1</a>
<a href="#">我是a2</a>
<a href="#">我是a3</a>
</body>
</html>
总结
本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！
相关推荐
-
基于jQuery架构javascript基础体系
jQuery的使用开始成为javascript开发者的主选产品,但如果没有一个整体的规划,简单的拿来主义势必带来后期维护成本的增加,大量的jQuery插件如同一把双刃剑,一方面大大节省了开发时间与周期,但同时也造成WEB页面加载的负担,带来的难护与二级扩展成本将非常庞大,因此,在使用之前就需要一个最基础的javascript架构体系,能明显基础功能组件,插件组件有效实施与扩展. 我们想,jQuery毕竟还只是一个基础的最底层的工具集,封装元素选择器,事件等等,基本上能满足一般的需求,但要从整体的
-
jQuery基础教程笔记适合js新手第1/2页
1, :eq()和nth-child() 看下面代码: <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("#selected-plays > li:eq(1)").addClass("a"); //等价于 $("#selected-plays > li:nth-child(2)").addClass("a"); //注意:js数组是从
-
JavaScript运动原理基础知识详解
在这篇文章里,我将把JS的运动由简如深的进行分析: 运动基础 主要步骤为: 清除定时器,保证运动过程中只有一个定时器 开启定时器 开始运动,同时加入判断以便在需要时停止运动.将移动函数进行了简单的封装. <script type='text/x-handlebars-template' id='list-item'> {{#if items}} <ul id='mylist'> {{#each items}} <li><a href='{{url}}'>{{
-
jQuery基础知识点总结(必看)
jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 1.jQuery入口函数与
-
JavaScript中while循环的基础使用教程
前言 在 JavaScript 语言中,当我们使用 while 循环时,只要指定条件为 true,循环就可以一直执行. 并且只要条件一直满足,就可以实现一个无限循环,例如: while(true){ console.log("1"); } 执行这个循环,就会无止境的输出1. while 语法及其使用 语法如下所示: while (condition) { // 要执行的代码块 } condition 是循环的条件,只有当循环条件成立时,才会执行花括号 {} 中的代码,如果条件不成立则不
-
JavaScript与JQuery框架基础入门教程
目录 一,JS对象 二,DOM –1,作用 –2,测试 三,Jquery –1,概述 –2,使用步骤 –3,入门案例 –4,jQuery的文档就绪 四,JQuery的语法 –1,选择器 –2,常用函数 –3,常用事件 –4,练习 总结 一,JS对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 js的创建对象</title> <s
-
jQuery选择器基础入门教程
本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv
-
Bootstrap零基础入门教程(三)
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.
-
Bootstrap零基础入门教程(二)
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.
-
一看就懂的ReactJs基础入门教程-精华版
一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re
-
jQuery Easyui快速入门教程
1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu
-
Leaflet 基础入门教程示例
目录 什么是Webgis? 什么是Leaflet? 在Vue中安装Leaflet,与其他依赖 在App.vue中使用 初始化地图 chinaProvider地图瓦片 addControls使用工具集 attribution创建自定义版权 Marker创建点 创建线 Polygon创建三角形 Popup弹窗&Tooltip提示 Geojson区域描边 总结 什么是Webgis? webGis又称之为网络地理信息系统,GIS的全名是Geographic Information System,它是在计
-
基于Bootstrap框架菜鸟入门教程(推荐)
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.栅格系统 栅格系统的工作原理: "行(row)"必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding). 通过"行(ro
-
Android 基础入门教程——开发环境搭建
现在主流的Android开发环境有: Eclipse + ADT + SDK Android Studio + SDK IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的Eclipse,而谷歌宣布不再更新ADT后,并且官网也去掉了集成Android开发环境的Eclipse下载链接,各种现象都表示开发者最后都终将过渡到Android Studio,当然这段过渡时间会很长,但如果你是刚学Android的话建议直接冲Android Studio着手:而且很多优秀的开源项目都是基于
-
MySQL基础入门教程之事务
目录 引言 1.事务操作 1.1 未控制事务 1.2 控制事务一 1.3 控制事务二 2.事务的四大特性 3.并发事务问题 4.事务隔离级别 总结 引言 事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败. 就比如: 张三给李四转账1000块钱,张三银行账户的钱减少1000,而李四银行账户的钱要增加1000. 这一组操作就必须在一个事务的范围内,要么都成功,要么都失败. 正常情况: 转账这个操作, 需