jquery的安装和语法,jquery的多种选择器,dom操作和jquery事件。
jQuery框架,简介,优势,安装,语法,jQuery选择器,id选择器,类选择器,标记选择器,属性选择器,位置选择器,后代选择器,子代选择器,选择器对象,选择器对象遍历,页面初始化,jQuery的dom操作,查找,删除,创建,复制,插入,替换,jQuery事件,事件绑定,鼠标事件,键盘事件,表单事件,窗口事件,事件冒泡,事件解除。
jQuery是一个很好用的JavaScript函数库,写的少,做的多。
请问jQuery的好处在哪里?
它的好处在于它轻量级,什么是轻量级呢?就是说它非常请求,大小在30kb左右;具有强大的选择器和dom操作的封装,可靠的事件处理机制,有完善的ajax,jquery将所有的ajax操作封装到函数$.ajax()中;具有丰富的插件,完善的文档,开源的产品。
jquery安装,从jquery下载jquery库,二是从cdn中下载。
jquery官方网址http://jquery.com
首先进入download jquery下载页面,下载最新的jquery库文件,有两个版本:生产版,Production version,用于实际网站,Development version开发版,用于测试和开发。
jquery
cdn中配置Jquery,如果不下载jquery的话,可以用cdn引用的。
jquery语法:
jquery$(selector).action()$(this).hide()$("p").hide()$("p.test").hide()$("#test").hide()// 入口$(document).ready(function(){ // 执行代码});$(function(){ // 执行代码});JavaScript的入口函数// 入口函数如下window.onload = function(){ // 执行代码}
JavaScript的入口函数与jquery入口函数:
jquery的入口函数是在HTML所有标签都加载后执行;JavaScript的window.onload事件是等所有内容(包括图片文件等)加载完之后才执行。
jquery选择器
document.getElementById();document.getElementsByClassName()document.getElementsByTagName()
选择器$(" "),为一个函数,为工厂函数,$为函数名称。
id选择器
$("#id")
根据给定的id匹配一个元素
类选择器
$(".class")
根据给定的类匹配元素
标记选择器
$("element")
根据给定元素名匹配所有元素
属性选择器
$("element[attribute]")
匹配包含给定属性的元素
$("div[title=test]")
位置选择器
$(element:position)
匹配符合标签中相应位置的元素
$("div:first")
匹配所有div中第一个div元素
后代选择器
$("ancestor descendant")
匹配给定的祖先元素的所有后代元素
$("#ul li")匹配 id 为null的所有li元素
子代选择器
$("parent>child")
匹配所有指定"parent"元素中指定"child"的直接子元素
$("#标签id值")// 原生var div = document.getElementById('test');div.style.border = '3px solid blue';// jquery$("#test1").css("border", "3px solid red");$(".class属性值")$(".cls1").css(...);$("标记名称");// 找到所有P标签$("p")属性选择器$("[属性名"])匹配所有具有指定属性的元素$("[属性名='值']")匹配与值相等的元素$("[属性名!='值']")匹配与值不相等的元素$("[属性名^='值']")匹配以值开头的元素$("[属性名$='值']")匹配以值结尾的元素$("[属性名*='值']")匹配包含值的元素
位置选择器:
$("selector:first")
匹配第一个元素
$("selector:last")
匹配最后一个元素
$("selector:odd")
匹配索引值为奇数的元素,从0开始计数
$("selector:even")
匹配索引值为偶数的元素,从0开始计数
$("selector.eq(n)")
匹配集合中索引值为n的元素
$("selector.gt(n)")
匹配集合中索引值大于n的元素
$("selector:lt(n)")
$("选择器1 选择器2...")
$("#test li").css("border", "2px solid red");
$("选择器1>选择器2>...")
选择器对象:
$("选择器").each(function(index){this})选择器对象的遍历$("选择器").find()找前面选择器匹配到的元素的子元素$("选择器").not()在前面选择器匹配到的元素中去除某个或者某几个$("选择器").add()在前面选择器中再追加节点
选择器对象遍历
- d
- a
页面初始化
将jquery函数代码放到这个函数就可以等到页面加载结束再运行。
Jquery中的dom操作。
dom是document object model的缩写。文档对象模型。dom是一种与浏览器,平台,语言无关的接口,jquery中的dom操作就是对HTML中的元素进行操作。
da
da
attr()获取它的各种属性的值
$(document).ready(function(){ $("button").click(function(){ alert($("p").attr("title")); });});
创建HTML元素:
$(document).ready(function(){ var $li1 = $("
d"); var $li2 = $("a"); $("button").click(function(){ $("ul").append($li1); $("ul").append($li2); });});
插入HTML元素
append()
向每个匹配的元素内部追加内容
appendTo()
将所有匹配的元素追加到另一个指定的元素集合中
注意:$(A).append(B)的操作,不是将B追加到A中,而是将A追加到B中
prepend()
向每个匹配的元素内部前置内容
prependTo()
将所有匹配的元素前置到另一个指定的元素集合中。
注意:$(A).prepend(B)的操作,不是将B前置到A中,而是将A前置到B中
after()
在每个匹配的元素之后插入内容
insertAfter()
将所有匹配的元素插入另一个指定的元素集合的后面
注意:$(A).after(B)的操作,不是将B插入到A后面,而是将A插入到B的后面
before()
在每个匹配的元素之前插入内容
insertBefore()
将所有匹配的元素插入另一个指定的元素集合的前面。
注意:$(A).before(B)的操作,不是将B插入A前面,而是将A插入B前面
删除HTML元素
删除HTML元素一般使用jquery中的remove()和empty()
remove()的作用就是从dom中删除被选元素以及子元素,就是如果某个元素被删除了,那么它的后代元素也都被删除。
empty()的作用并不是删除HTML元素,而是清空HTML元素,可以清空选中HTML元素中所有后代HTML元素。
复制HTML元素
clone()的作用是复制HTML元素。
$(document).ready(function() { $("button").click(function() { $("body").append($("p").clone()); }); });});
替换HTML元素
有两种方法:replaceWith()和replaceAll()两个方法
repalceWith()
将所有匹配的元素替换成指定的HTML元素或dom元素
repalceAll(selector)
用匹配的元素替换所有selector匹配到的元素
replaceWith()和replaceAll()的作用是一样的,只是用法不同。
A元素替换B元素:
replaceWith()的写法
A.replaceWith("B")
B.replaceAll("A")
$(document).ready(function(){ $("button").click(function(){ $("ul li:eq(0)").replaceWith("
da") }); });
事件
鼠标事件:
click,mouseover,hover
键盘事件:
keypress,keydown,keyup
表单事件:
submit,change,focus
窗口事件:
scroll,resize
事件绑定
事件绑定语法bind()方法:
bind(type,[data],fn)
click(),blur(),focus(),mouseover(),mouseout(),mousedown(),mouseup()mouseenter(),mouseleave(),resize(),scroll(),keydown(),keyup(),keypress()
type参数是含有一个或多个事件类型的字符串,data参数是作为event.data属性值传递给事件对象的额外数据对象,fn参数为绑定到每个匹配元素事件上面的处理函数。
$(document).ready(function(){ $("input").bind("focus",function(){ $("span").show(); });});
简写绑定事件
$(document).ready(function(){ $("input").focus(function(){ $("span").show(); });});
鼠标事件click(),dblclick()双击在短时间内发生两次click就是依次双击事件。
mouseenter()当鼠标指针穿过元素时会发生mouseenter事件,mouseleave()当鼠标指针离开元素时会发生mouseleave事件。hover()用于模拟光标悬停事件。
$(document).ready(function(){ $("#p1").hover{ function(){ $("#p1").css('background','green'); }, function(){ $('#p1").css("background","pink"); } }});
keydown()键盘或按钮被按下时,发生keydown事件,keyup当键盘被松开时发生keyup事件。keypress()当键盘或按钮被按下时,发生keypress事件。
表单事件
当提交表单时,会发生submit事件。change()当元素的值发生改变时,会发生change事件,focus()当元素获得焦点时,触发focus事件。blur()当元素失去焦点时触发。
窗口事件:
scroll()当用户滚动指定的元素时,会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。resize()当调整浏览器窗口的大小时,会触发resize事件。
x=0;$(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); }); });
事件冒泡,事件会按照dom的层次结构像水泡一样不断向上直至顶端
停止冒泡和默认行为:
stopPrapagation()和preventDefault()
event.preventDefault();// 阻止默认行为
event.stopPropagation();// 停止事件冒泡
事件解除:
unbind(type, [data])
type为事件类型
data为将要解除的函数、
![a882b9672c0656e549ba8c20b0f601be.png](https://i-blog.csdnimg.cn/blog_migrate/f59e3e1baf35f8238f02194a08d17dd5.jpeg)
原文链接:https://mp.weixin.qq.com/s/GX7QiTZBLz7Kr64dtm8mbw
作者:达达前端小酒馆