贵州省住房和建设厅网网站首页,格尔木城乡建设规划局网站,网站转化分析,深圳制作网站专业文章目录一. 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 srcJS/jquery-1.12.4.min.js/script
!-- 注意导入 jquery 的script区域和标签操作区域不能一样 --
script代码
/scriptJS对象和Jquery对象转换
js对象 ---- jquery对象
oDiv ---- $(oDiv)Jquery对象 ---- js对象
$Div ---- $Div[0]在浏览器中, 可以使用控制台 var oDiv document.getElementById(box)
undefinedoDiv;
div idbox 这是一个div /divvar $Div $(oDiv)
undefined$Div
n.fn.init [div#box, context: div#box]$Div[0]
div idbox 这是一个div /div$Div[1]
undefined三. JQuery选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入Jquery --script srcJS/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[classbox]).length); // 1});/script
/head
bodydiv idbox classbox这是第一个divp好好学习/p/divdiv 这时第二个divp天天向上/p/div
/body
/html四. JQuery选择集过滤
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcJs/jquery-1.12.4.min.js/scriptscript$(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
bodydiv这是第一个divp好好学习/p/divdiv这是第二个div br天天向上/div
/body
/html五.JQuery选择集转移
注意: 转移不包含自己, 而过滤是包含自己的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcJS/jquery-1.12.4.min.js/scriptscript$(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
bodyul!-- li{文字$}*8 可以批量生成 --li文字1/lili文字2/lili idbox文字3/lili文字4/lili文字5/lili文字6/lili文字7/lili文字8/li/uldivthis is div1pthis is p1/p/divdivthis is div2p classc_pthis is p2/p/div
/body
/html六. JQuery获取和操作标签内容
获取标签内容: 标签对象.html()设置标签内容: 标签对象.html(内容)追加标签内容: 标签对象.append(内容)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){// 获取标签内容var sResult $(div).html();alert(sResult);// 修改标签内容$(div).html(good good study!);// 追加标签内容$(div).append(a hrefhttp://www.baidu.com百度/a);});/script
/head
bodydiv好好学习/div
/body
/html七. JQuery获取和设置元素属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcJS/jquery-1.12.4.min.js/scriptscript$(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
bodydiva hrefhttp://www.baidu.com百度/a/divdivinput typetext name idbox value10input typebutton value点击获取 input 内容 onclickfnClick()input typebutton value点击, 对 input 的数字 10显示 onclickfnAdd()/div
/body
/html八. JQuery事件
鼠标点击: click()失去焦点: blur()获得焦点: focus()鼠标进入: mouseover()鼠标离开: mouseleave()页面标签加载完成: $(document).ready()
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 200px;height: 80px;background: red;font-size: 26px;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript$(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
bodydiv这是一个div/divinput typetext placeholder请输入内容
/body
/html九.JQuery事件代理
事件代理: 使用事件冒泡的原理, 让父标签代理子标签的事件
$(父标签选择器).delegate(子标签选择器, 代理事件, 处理函数);- 事件冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1{width: 300px;height: 300px;background: red;}.box2{width: 100px;height: 100px;background: pink;}/stylescript srcjs/jquery-1.12.4.min.js/scriptscript// 事件冒泡: 内层标签的事件会向外层标签进行传递, 例如 下面两个div ,点击内层的div , 外层的div也会随着发生变化$(function(){$(div).click(function(){$(this).css({background: blue});});});/script
/head
bodydiv classbox1This is div div classbox2Good Good Study/div/div
/body
/html- 事件绑定的问题
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){// 事件绑定, 只能对在绑定之前已经存在的标签进行绑定, 新加入的标签不能绑定$(li).click(function(){console.log($(this).html());});});function fnClick(){// 添加li标签$(ul).append(li文字 ($(li).length1) /li);};/script
/head
bodyulli文字1/lili文字2/lili文字3/lili文字4/lili文字5/li/ulinput typebutton value点击添加li标签 onclickfnClick()
/body
/html- 事件代理
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/jquery-1.12.4.min.js/scriptscript$(function(){// 事件代理, 让父标签代理子标签的事件// delegate(子元素选择器, 代理的事件名称, 当事件触发时执行的代码,可以写 function(){}匿名函数)$(ul).delegate(li, click, function(){console.log($(this).html());});});function fnClick(){// 添加li标签$(ul).append(li文字 ($(li).length1) /li);};/script
/head
bodyulli文字1/lili文字2/lili文字3/lili文字4/lili文字5/li/ulinput typebutton value点击添加li标签 onclickfnClick()
/body
/html
