idjquery选择器开头_web前端轻量级框架应用（jQuery基础）

jquery的安装和语法&＃xff0c;jquery的多种选择器&＃xff0c;dom操作和jquery事件。

jQuery框架&＃xff0c;简介&＃xff0c;优势&＃xff0c;安装&＃xff0c;语法&＃xff0c;jQuery选择器&＃xff0c;id选择器&＃xff0c;类选择器&＃xff0c;标记选择器&＃xff0c;属性选择器&＃xff0c;位置选择器&＃xff0c;后代选择器&＃xff0c;子代选择器&＃xff0c;选择器对象&＃xff0c;选择器对象遍历&＃xff0c;页面初始化&＃xff0c;jQuery的dom操作&＃xff0c;查找&＃xff0c;删除&＃xff0c;创建&＃xff0c;复制&＃xff0c;插入&＃xff0c;替换&＃xff0c;jQuery事件&＃xff0c;事件绑定&＃xff0c;鼠标事件&＃xff0c;键盘事件&＃xff0c;表单事件&＃xff0c;窗口事件&＃xff0c;事件冒泡&＃xff0c;事件解除。

jQuery是一个很好用的Javascript函数库&＃xff0c;写的少&＃xff0c;做的多。

请问jQuery的好处在哪里&＃xff1f;

它的好处在于它轻量级&＃xff0c;什么是轻量级呢&＃xff1f;就是说它非常请求&＃xff0c;大小在30kb左右&＃xff1b;具有强大的选择器和dom操作的封装&＃xff0c;可靠的事件处理机制&＃xff0c;有完善的ajax&＃xff0c;jquery将所有的ajax操作封装到函数$.ajax()中&＃xff1b;具有丰富的插件&＃xff0c;完善的文档&＃xff0c;开源的产品。

jquery安装&＃xff0c;从jquery下载jquery库&＃xff0c;二是从cdn中下载。

jquery官方网址http://jquery.com

首先进入download jquery下载页面&＃xff0c;下载最新的jquery库文件&＃xff0c;有两个版本&＃xff1a;生产版&＃xff0c;Production version&＃xff0c;用于实际网站&＃xff0c;Development version开发版&＃xff0c;用于测试和开发。

jquery

cdn中配置Jquery&＃xff0c;如果不下载jquery的话&＃xff0c;可以用cdn引用的。

jquery语法&＃xff1a;

jquery$(selector).action()$(this).hide()$("p").hide()$("p.test").hide()$("#test").hide()// 入口$(document).ready(function(){ // 执行代码});$(function(){ // 执行代码});Javascript的入口函数// 入口函数如下window.onload &＃61; function(){ // 执行代码}

Javascript的入口函数与jquery入口函数&＃xff1a;

jquery的入口函数是在HTML所有标签都加载后执行&＃xff1b;Javascript的window.onload事件是等所有内容(包括图片文件等)加载完之后才执行。

jquery选择器

document.getElementById();document.getElementsByClassName()document.getElementsByTagName()

选择器$(" "),为一个函数&＃xff0c;为工厂函数&＃xff0c;$为函数名称。

id选择器

$("#id")

根据给定的id匹配一个元素

类选择器

$(".class")

根据给定的类匹配元素

标记选择器

$("element")

根据给定元素名匹配所有元素

属性选择器

$("element[attribute]")

匹配包含给定属性的元素

$("div[title&＃61;test]")

位置选择器

$(element:position)

匹配符合标签中相应位置的元素

$("div:first")

匹配所有div中第一个div元素

后代选择器

$("ancestor descendant")

匹配给定的祖先元素的所有后代元素

$("#ul li")匹配 id 为null的所有li元素

子代选择器

$("parent>child")

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#标签id值")// 原生var div &＃61; document.getElementById(&＃39;test&＃39;);div.style.border &＃61; &＃39;3px solid blue&＃39;;// jquery$("#test1").css("border", "3px solid red");$(".class属性值")$(".cls1").css(...);$("标记名称");// 找到所有P标签$("p")属性选择器$("[属性名"])匹配所有具有指定属性的元素$("[属性名&＃61;&＃39;值&＃39;]")匹配与值相等的元素$("[属性名!&＃61;&＃39;值&＃39;]")匹配与值不相等的元素$("[属性名^&＃61;&＃39;值&＃39;]")匹配以值开头的元素$("[属性名$&＃61;&＃39;值&＃39;]")匹配以值结尾的元素$("[属性名*&＃61;&＃39;值&＃39;]")匹配包含值的元素

位置选择器&＃xff1a;

$("selector:first")

匹配第一个元素

$("selector:last")

匹配最后一个元素

$("selector:odd")

匹配索引值为奇数的元素&＃xff0c;从0开始计数

$("selector:even")

匹配索引值为偶数的元素&＃xff0c;从0开始计数

$("selector.eq(n)")

匹配集合中索引值为n的元素

$("selector.gt(n)")

匹配集合中索引值大于n的元素

$("selector:lt(n)")

$("选择器1 选择器2...")

$("#test li").css("border", "2px solid red");

$("选择器1>选择器2>...")

选择器对象&＃xff1a;

$("选择器").each(function(index){this})选择器对象的遍历$("选择器").find()找前面选择器匹配到的元素的子元素$("选择器").not()在前面选择器匹配到的元素中去除某个或者某几个$("选择器").add()在前面选择器中再追加节点

选择器对象遍历

• d
• a

页面初始化

将jquery函数代码放到这个函数就可以等到页面加载结束再运行。

Jquery中的dom操作。

dom是document object model的缩写。文档对象模型。dom是一种与浏览器&＃xff0c;平台&＃xff0c;语言无关的接口&＃xff0c;jquery中的dom操作就是对HTML中的元素进行操作。

da

attr()获取它的各种属性的值

$(document).ready(function(){ $("button").click(function(){ alert($("p").attr("title")); });});

创建HTML元素&＃xff1a;

$(document).ready(function(){ var $li1 &＃61; $("d"); var $li2 &＃61; $("a"); $("button").click(function(){ $("ul").append($li1); $("ul").append($li2); });});

插入HTML元素

append()

向每个匹配的元素内部追加内容

appendTo()

将所有匹配的元素追加到另一个指定的元素集合中

注意&＃xff1a;$(A).append(B)的操作&＃xff0c;不是将B追加到A中&＃xff0c;而是将A追加到B中

prepend()

向每个匹配的元素内部前置内容

prependTo()

将所有匹配的元素前置到另一个指定的元素集合中。

注意&＃xff1a;$(A).prepend(B)的操作&＃xff0c;不是将B前置到A中&＃xff0c;而是将A前置到B中

after()

在每个匹配的元素之后插入内容

insertAfter()

将所有匹配的元素插入另一个指定的元素集合的后面

注意&＃xff1a;$(A).after(B)的操作&＃xff0c;不是将B插入到A后面&＃xff0c;而是将A插入到B的后面

before()

在每个匹配的元素之前插入内容

insertBefore()

将所有匹配的元素插入另一个指定的元素集合的前面。

注意&＃xff1a;$(A).before(B)的操作&＃xff0c;不是将B插入A前面&＃xff0c;而是将A插入B前面

删除HTML元素

删除HTML元素一般使用jquery中的remove()和empty()

remove()的作用就是从dom中删除被选元素以及子元素&＃xff0c;就是如果某个元素被删除了&＃xff0c;那么它的后代元素也都被删除。

empty()的作用并不是删除HTML元素&＃xff0c;而是清空HTML元素&＃xff0c;可以清空选中HTML元素中所有后代HTML元素。

复制HTML元素

clone()的作用是复制HTML元素。

$(document).ready(function() { $("button").click(function() { $("body").append($("p").clone()); }); });});

替换HTML元素

有两种方法&＃xff1a;replaceWith()和replaceAll()两个方法

repalceWith()

将所有匹配的元素替换成指定的HTML元素或dom元素

repalceAll(selector)

用匹配的元素替换所有selector匹配到的元素

replaceWith()和replaceAll()的作用是一样的&＃xff0c;只是用法不同。

A元素替换B元素&＃xff1a;

replaceWith()的写法

A.replaceWith("B")

B.replaceAll("A")

$(document).ready(function(){ $("button").click(function(){ $("ul li:eq(0)").replaceWith("da") }); });

事件

鼠标事件:

click&＃xff0c;mouseover&＃xff0c;hover

键盘事件&＃xff1a;

keypress&＃xff0c;keydown&＃xff0c;keyup

表单事件&＃xff1a;

submit&＃xff0c;change&＃xff0c;focus

窗口事件:

scroll&＃xff0c;resize

事件绑定

事件绑定语法bind()方法&＃xff1a;

bind(type,[data],fn)

click(),blur(),focus(),mouseover(),mouseout(),mousedown(),mouseup()mouseenter(),mouseleave(),resize(),scroll(),keydown(),keyup(),keypress()

type参数是含有一个或多个事件类型的字符串&＃xff0c;data参数是作为event.data属性值传递给事件对象的额外数据对象&＃xff0c;fn参数为绑定到每个匹配元素事件上面的处理函数。

$(document).ready(function(){ $("input").bind("focus",function(){ $("span").show(); });});

简写绑定事件

$(document).ready(function(){ $("input").focus(function(){ $("span").show(); });});

鼠标事件click(),dblclick()双击在短时间内发生两次click就是依次双击事件。

mouseenter()当鼠标指针穿过元素时会发生mouseenter事件&＃xff0c;mouseleave()当鼠标指针离开元素时会发生mouseleave事件。hover()用于模拟光标悬停事件。

$(document).ready(function(){ $("#p1").hover{ function(){ $("#p1").css(&＃39;background&＃39;,&＃39;green&＃39;); }, function(){ $(&＃39;#p1").css("background","pink"); } }});

keydown()键盘或按钮被按下时&＃xff0c;发生keydown事件&＃xff0c;keyup当键盘被松开时发生keyup事件。keypress()当键盘或按钮被按下时&＃xff0c;发生keypress事件。

表单事件

当提交表单时&＃xff0c;会发生submit事件。change()当元素的值发生改变时&＃xff0c;会发生change事件&＃xff0c;focus()当元素获得焦点时&＃xff0c;触发focus事件。blur()当元素失去焦点时触发。

窗口事件&＃xff1a;

scroll()当用户滚动指定的元素时&＃xff0c;会触发scroll事件。scroll事件适用于所有可滚动的元素和window对象。resize()当调整浏览器窗口的大小时&＃xff0c;会触发resize事件。

x&＃61;0;$(document).ready(function(){ $(window).resize(function(){ $("span").text(x&＃43;&＃61;1); }); });

事件冒泡&＃xff0c;事件会按照dom的层次结构像水泡一样不断向上直至顶端

停止冒泡和默认行为&＃xff1a;

stopPrapagation()和preventDefault()

event.preventDefault();// 阻止默认行为

event.stopPropagation();// 停止事件冒泡

事件解除&＃xff1a;

unbind(type, [data])

type为事件类型

data为将要解除的函数、

原文链接&＃xff1a;https://mp.weixin.qq.com/s/GX7QiTZBLz7Kr64dtm8mbw
作者&＃xff1a;达达前端小酒馆