当前位置： 首页 > news >正文

有哪些网站建设工作百度网页游戏中心

news 2025/7/16 2:50:40
有哪些网站建设工作,百度网页游戏中心,空间搭建wordpress,在住房城乡建设部网站上哪里下载规范文章目录一. JQuery介绍二. JQuery使用三. JQuery选择器四. JQuery选择集过滤五.JQuery选择集转移六. JQuery获取和操作标签内容七. JQuery获取和设置元素属性八. JQuery事件九.JQuery事件代理- 事件冒泡- 事件绑定的问题- 事件代理一. JQuery介绍 定义: jquery是JS的一个函数…

文章目录

  • 一. JQuery介绍
  • 二. JQuery使用
  • 三. JQuery选择器
  • 四. JQuery选择集过滤
  • 五.JQuery选择集转移
  • 六. JQuery获取和操作标签内容
  • 七. JQuery获取和设置元素属性
  • 八. JQuery事件
  • 九.JQuery事件代理
    • - 事件冒泡
    • - 事件绑定的问题
    • - 事件代理

一. JQuery介绍

  • 定义: jquery是JS的一个函数库
  • 作用: 负责网页交互
  • 优点: 兼容主流浏览器, 简化JS编程过程, 提高开发效率

二. JQuery使用

<script src="JS/jquery-1.12.4.min.js"></script>
<!-- 注意导入 jquery 的script区域和标签操作区域不能一样 -->
<script>代码
</script>
  • JS对象和Jquery对象转换
js对象 ----> jquery对象
oDiv ----> $(oDiv)Jquery对象 ----> js对象
$Div ----> $Div[0]
  • 在浏览器中, 可以使用控制台
> var oDiv = document.getElementById('box')
undefined
> oDiv;
<div id="box"> 这是一个div </div>
> var $Div = $(oDiv)
undefined
> $Div
n.fn.init [div#box, context: div#box]
> $Div[0]
<div id="box"> 这是一个div </div>
> $Div[1]
undefined

三. JQuery选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入Jquery --><script src="JS/jquery-1.12.4.min.js"></script><!-- 书写自己的js代码 --><script>// 入口函数$(function(){// 标签选择器  $('标签')var result = $('div');console.log(result.length);  // 2// id选择器   $('#ID号')console.log($('#box').length);  // 1// 类选择器   $('#类名')console.log($('.box').length);  // 1// 层级选择器 $('选择器1 选择器2')console.log($('div p').length);   // 2// 属性选择器 $('选择器[属性=值]')console.log($('div[class="box"]').length);  // 1});</script>
</head>
<body><div id="box" class="box">这是第一个div<p>好好学习</p></div><div >这时第二个div<p>天天向上</p></div>
</body>
</html>

四. JQuery选择集过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="Js/jquery-1.12.4.min.js"></script><script>$(function(){$('div').css({'background': 'red'});// 选择集过滤, has 可以再指定其他选择器进行筛选, 相当于加了一个条件$('div').has('p').css({'font-size': '28px', 'background': 'pink'});// eq(下标)   下标是从0开始的, 1就表示第二个div标签$('div').eq(1).css({'color': 'green'});});</script>
</head>
<body><div>这是第一个div<p>好好学习</p></div><div>这是第二个div <br>天天向上</div>
</body>
</html>

五.JQuery选择集转移

  • 注意: 转移不包含自己, 而过滤是包含自己的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){// 选择文字3的标签$li = $('#box');$li.css({'background': 'red'});// 选择上一个   $li.prev()$li.prev().css({'background': 'green'});// 选择上面所有的   $li.prevAll()$li.prevAll().css({'color': 'blue'});// 选择下一个$li.next().css({'background': 'yellow'});// 选择下面所有的$li.nextAll().css({'color': 'orange'});// 选择除了自己之外的同一级节点$li.siblings().css({'font-size': '26px'});// 选择父级节点$('ul').parent().css({'background': 'pink'});// 选择子集节点$('div').children().css({'background': 'blue'});// find() 查找的是子标签,最终选择子标签$('div').find('.c_p').css({'color': 'red'});// has()  查找的是子标签,最终选择的是自己$('div').has('.c_p').css({'font-size': '30px'});});</script>
</head>
<body><ul><!-- li{文字$}*8 可以批量生成 --><li>文字1</li><li>文字2</li><li id="box">文字3</li><li>文字4</li><li>文字5</li><li>文字6</li><li>文字7</li><li>文字8</li></ul><div>this is div1<p>this is p1</p></div><div>this is div2<p class="c_p">this is p2</p></div>
</body>
</html>

六. JQuery获取和操作标签内容

  • 获取标签内容: 标签对象.html()
  • 设置标签内容: 标签对象.html('内容')
  • 追加标签内容: 标签对象.append('内容')
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 获取标签内容var sResult = $('div').html();alert(sResult);// 修改标签内容$('div').html('good good study!');// 追加标签内容$('div').append('<a href="http://www.baidu.com">百度</a>');});</script>
</head>
<body><div>好好学习</div>
</body>
</html>

七. JQuery获取和设置元素属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="JS/jquery-1.12.4.min.js"></script><script>$(function(){var $A = $('a');// 获取a标签的 href 属性alert($A.prop('href'));// 设置属性, 可以直接修改原有属性或者增加新属性$A.prop({'href': 'https://www.csdn.net/', 'target': '_blank'});});function fnClick(){// 获取input标签alert($('#box').prop('value'));};function fnAdd(){// 先获取 输入的值// alert($('#box').prop('value'));var result = $('#box').val();// 默认获取到的数据类型是字符串, 想要进行加法计算, 需要进行类型转换result = parseInt(result);$('#box').val(result + 10);};</script>
</head>
<body><div><a href="http://www.baidu.com">百度</a></div><div><input type="text" name="" id="box" value="10"><input type="button" value="点击获取 input 内容" onclick="fnClick()"><input type="button" value="点击, 对 input 的数字 + 10显示" onclick="fnAdd()"></div>
</body>
</html>

八. JQuery事件

  • 鼠标点击: click()
  • 失去焦点: blur()
  • 获得焦点: focus()
  • 鼠标进入: mouseover()
  • 鼠标离开: mouseleave()
  • 页面标签加载完成: $(document).ready()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 80px;background: red;font-size: 26px;}</style><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 鼠标点击事件$('div').click(function(){// 特殊变量 this   发生事件的标签对象, 相当于python的selfconsole.log('鼠标点击了: ',$(this).html());});// 鼠标进入$('div').mouseover(function(){console.log('鼠标进入了');$(this).css({'background': 'blue'});});// 鼠标离开$('div').mouseleave(function(){console.log('鼠标离开了');$(this).css({'background': 'red'});});// 获得焦点 输入框$('input').focus(function(){$(this).prop({'placeholder': ''});$(this).css({'font-size': '28px'});});// 失去焦点$('input').blur(function(){$(this).prop({'placeholder': '请输入内容'});$(this).css({'font-size': ''});});});</script>
</head>
<body><div>这是一个div</div><input type="text" placeholder="请输入内容">
</body>
</html>

九.JQuery事件代理

  • 事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件
$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);

- 事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background: red;}.box2{width: 100px;height: 100px;background: pink;}</style><script src="js/jquery-1.12.4.min.js"></script><script>// 事件冒泡: 内层标签的事件会向外层标签进行传递, 例如 下面两个div ,点击内层的div , 外层的div也会随着发生变化$(function(){$('div').click(function(){$(this).css({'background': 'blue'});});});</script>
</head>
<body><div class="box1">This is div <div class="box2">Good Good Study</div></div>
</body>
</html>

- 事件绑定的问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 事件绑定, 只能对在绑定之前已经存在的标签进行绑定, 新加入的标签不能绑定$('li').click(function(){console.log($(this).html());});});function fnClick(){// 添加li标签$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>

- 事件代理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){// 事件代理, 让父标签代理子标签的事件// delegate('子元素选择器', '代理的事件名称', '当事件触发时执行的代码,可以写 function(){}匿名函数')$('ul').delegate('li', 'click', function(){console.log($(this).html());});});function fnClick(){// 添加li标签$('ul').append('<li>文字' + ($('li').length+1) + '</li>');};</script>
</head>
<body><ul><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul><input type="button" value="点击添加li标签" onclick="fnClick()">
</body>
</html>
http://www.dinnco.com/news/50593.html

相关文章：

  • 淘宝客网站推广备案信息网络营销推广方式包括哪几种
  • 网站建设一条龙服务我想做电商怎么加入
  • 创新的医疗网站建设semifinal
  • 武汉做网站的公司网站公司的肇庆百度快速排名
  • dw软件做的东西怎么在网站用外贸独立站怎么做
  • 怎么做企业网址seo平台是什么
  • 制作付款网站系统优化大师官方下载
  • 做网站需要什么系统外贸营销网站制作
  • html5企业网站赏析seo怎么收费的
  • pc端网站未来百度竞价推广课程
  • 个人做外包网站多少钱建网站的详细步骤
  • 江阴哪里有做网站推广百度搜索引擎的原理
  • 地方门户网站开发方案网站seo好学吗
  • wordpress模板怎么修改字体seo网站的优化方案
  • 免费做App和网站的平台手机google官网注册账号入口
  • 公司网站开发网络营销策划书
  • 长春专业企业网站建设价格怎样做品牌推广
  • php网站开发文章管理系统网站seo优化有哪些方面
  • 旅游景点网站建设规划书产品推广运营方案
  • 赌博网站程序架设网页制作软件dw
  • 衡水企业网站设计报价百度一下百度官网
  • 南京明月建设集团网站西安网络优化大的公司
  • 网站制作网站模板网络营销策划的方法
  • 网站设置的用途安徽网站推广
  • 海口免费建站怎样打百度人工客服热线
  • 石家庄网站建设联系电话seo长尾关键词排名
  • 江苏住房和城乡建设委员会网站郑州厉害的seo顾问公司
  • 在哪个网站做网上兼职靠谱吗网站seo优化总结
  • 新手可以自己建网站吗谷歌google官网下载
  • 网站备案检验单北京seo人员