JavaScript与JQuery框架基础入门教程
<!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='https://www.haobala.com/bcjs/16348.html#' id='a1'>我是a1</a><a href='https://www.haobala.com/bcjs/16348.html#' 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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/16348.html#'>我是a2</a><a href='https://www.haobala.com/bcjs/16348.html#'>我是a3</a></body></html>总结
本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注好吧啦网的更多内容！
相关文章：
网公网安备