哪些网站可以免费做推广,页面模板参数错误,seo优化有哪些,wordpress悬赏功能实现【一】JQuery基础
【1】什么时Jquery
#xff08;1#xff09;定义
jQuery是一个流行的JavaScript库#xff0c;旨在简化JavaScript编程和处理HTML文档的任务。它提供了一组易于使用的功能和方法#xff0c;可以加快开发速度并提高跨浏览器兼容性。一款轻量级的JS框架
…
【一】JQuery基础
【1】什么时Jquery
1定义
jQuery是一个流行的JavaScript库旨在简化JavaScript编程和处理HTML文档的任务。它提供了一组易于使用的功能和方法可以加快开发速度并提高跨浏览器兼容性。一款轻量级的JS框架
2特点
简化DOM操作jQuery提供了简洁的语法和方法使得选择和操作HTML元素变得更加容易。可以使用CSS选择器来选择元素并使用链式调用方法来操作它们。事件处理jQuery使事件处理变得更加简单。您可以使用.on()方法来附加事件处理程序并使用.click()、.hover()等方法来处理常见的事件。AJAX支持jQuery提供了简化和改进AJAXAsynchronous JavaScript and XML操作的方法。可以使用.ajax()方法轻松地发送异步HTTP请求并处理返回的数据。动画效果jQuery具有丰富的动画功能可以轻松地创建过渡效果、淡入淡出、滑动等动画效果。可以使用.animate()方法来控制元素的属性值从而实现动画效果。跨浏览器兼容性jQuery致力于提供跨浏览器一致性。会自动处理浏览器之间的差异并提供相应的解决方案以确保代码在不同浏览器上运行良好。插件生态系统jQuery拥有丰富的插件生态系统使开发人员能够轻松地扩展和定制功能。这些插件提供了各种功能如日期选择器、图表库、图像轮播等。
3版本 1.x 兼容IE678,使用最为广泛的官方只做BUG维护功能不再新增。因此一般项目来说使用1.x版本就可以了最终版本1.12.4 (2016年5月20日) 2.x 不兼容IE678很少有人使用官方只做BUG维护功能不再新增。 如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4 (2016年5月20日)3.x 3.x 不兼容IE678只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
【2】基本语法
1基本语法结构
jQuery(选择器).action2简写
$(选择器).action【3】下载和配置
1下载导入
官网下载地址Download jQuery | jQuery 复制并保存在本地jquery-3.7.1.min.js 导入
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjquery-3.7.1.min.js/script
/head
body/body
/html2基于网络分布 比需要有网络 jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 复制script标签 导入
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script
/head
body/body
/html【4】修改Pycharm默认配置
首先进入settings界面点击Editor再点击File and Code Templates编辑HTML file
!DOCTYPE html
html langen
headmeta charsetUTF-8title#[[$Title$]]#/titlemeta nameviewport contentwidthdevice-width,initial-scale1.0script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script
/head
body
#[[$END$]]#
/body
/html【二】选择器
选择器用于选取HTML元素
【1】基本选择器
0类型转换
jQuery对象 - 标签对象
//第一个id为d1的标签
$(#d1)[0]标签对象 - jQuery对象
$(document.getElementById(d1))1元素选择器
使用元素名称作为选择器选取所有匹配该元素名称的元素。
// 选择所有的段落元素
$(p)2ID选择器
使用ID属性值作为选择器选取具有相同ID的唯一元素。
// 选择ID为id1的元素
$(#id1)3类选择器
使用类名作为选择器选取具有相同类名的元素。
// 选择类名为my-class的元素
$(.my-class)// 选择同时包含class1和class2类名的元素
$(.class1.class2)4属性选择器
使用元素的属性和属性值进行选择。
// 选择所有具有title属性的元素
$([title])// 选择具有title属性且值为example的元素
$([titleexample])//选择具有 href 属性值以 https:// 开头的所有链接
$(a[href^https://])5选择器组合
通过逗号分隔多个选择器同时选择多个元素。
// 选择包含class1或class2类名的元素
$(.class1, .class2)6后代选择器
选择某个元素的后代元素。
// 选择所有div内部的p元素
$(div p)7儿子选择器
选择某个元素的直接子元素。
// 选择所有列表元素中的直接子元素li
$(ul li)8毗邻选择器
选择紧接在指定元素后的毗邻元素。
//选择紧接在 myElement 元素后的下一个兄弟元素
$(#myElement div)9兄弟选择器
选择指定元素之后的所有兄弟元素。
//选择紧接在 myElement 元素后的所有兄弟元素中具有 myClass 类的元素
$(#myElement ~ .myClass);【2】属性选择器
属性选择器可以根据属性的存在、属性值的相等性、属性值的前缀、后缀或包含关系来选择元素。
1[attribute]
选择具有指定属性的元素。例如[href] 会选择具有 href 属性的元素。
2[attributevalue]
选择具有指定属性并且属性值等于指定值的元素。例如[typetext] 会选择 type 属性值为 text 的元素。
3[attribute~value]
选择具有指定属性并且属性值包含指定值的元素。属性值可以是多个单词用空格分隔。例如[class~red] 会选择具有 class 属性值包含单词 red 的元素。
p classred boldThis is a paragraph./p
p classblueThis is another paragraph./p
p classredThis is a third paragraph./pscript//第一个和第三个 p 元素都具有 class属性值包含单词 red因此它们会被选中。$([class~red])
/script 4[attribute|value]
选择具有指定属性并且属性值以指定值开头的元素或者以指定值开头并且后面紧跟连字符-的元素。例如[lang|en] 会选择具有 lang 属性值为 en 或者以 en- 开头的元素。
div langenEnglish content/div
div langen-USEnglish (United States) content/div
div langfrFrench content/divscript//第一个和第二个 div 元素都符合这个条件因此它们会被选中$([lang|en])
/script 5[attribute^value]
选择具有指定属性并且属性值以指定值开头的元素。例如[href^https] 会选择具有 href 属性值以 https 开头的元素。
a hrefhttps://www.example.comLink 1/a
a hrefhttp://www.example.comLink 2/ascript//选择第一个 a 元素$([href^https://])
/script 6[attribute$value]
选择具有指定属性并且属性值以指定值结尾的元素。例如[src$.png] 会选择具有 src 属性值以 .png 结尾的元素。
img srcimage.png altImage 1
img srcimage.jpg altImage 2script//选择第一个 img 元素$([src$.png])
/script 7[attribute*value]
选择具有指定属性并且属性值包含指定值的元素。例如[title*open] 会选择具有 title 属性值包含单词 open 的元素。
p classred-textRed text/p
p classblue-textBlue text/pscript//选择第一个 p 元素$([class*red])
/script 8组合
选择具有以特定属性值开头且以特定字符串结尾的元素
a hrefhttps://www.example.com/homeHome/a
a hrefhttps://www.example.com/aboutAbout/a
a hrefhttps://www.example.com/contactContact/a
a hrefhttps://www.example.com/productsProducts/ascript//选择第一个 a 元素$(a[href^https:][href$home])
/script 【3】组合选择器
1并集分组
使用号分隔
// 选择包含class1或class2类名的元素
$(.class1, .class2)2交集
紧挨着
// 选择同时包含class1和class2类名的元素
$(.class1.class2)3嵌套
.find()方法
//选择包含class1类名元素下的包含class2类名的元素
$(.class1).find(.class2)【三】筛选器
【1】基本筛选器
:first选择第一个匹配的元素。:last选择最后一个匹配的元素。:even选择索引为偶数的元素从0开始计数 它会选择索引为0、2、4等的匹配元素。 :odd选择索引为奇数的元素从0开始计数。 它会选择索引为1、3、5等的匹配元素。 :eq(index)选择索引为指定值的元素其中 index 是一个整数。 它会选择与指定索引相匹配的元素。例如:eq(2) 会选择第三个匹配的元素。 :gt(index)选择索引大于指定值的元素其中 index 是一个整数。 它会选择索引大于指定值的所有匹配元素。 :lt(index)选择索引小于指定值的元素其中 index 是一个整数。 它会选择索引小于指定值的所有匹配元素。 :header选择所有标题元素如 h1, h2, h3 等。 它会选择文档中所有的标题元素。 :not(selector)选择不匹配指定选择器的元素。 它会选择不符合指定选择器条件的所有元素。 :has(selector)选择包含至少一个匹配指定选择器的元素。 它会选择包含至少一个符合指定选择器条件的元素的所有元素。 :empty选择没有子元素或文本的空元素。:contains(text)选择包含指定文本 text 的元素。:parent选择有子元素或文本的元素。及父子关系或这文本内容。
divpThis is a paragraph./p
/div
spanSome text/spanscript
//它将选择 div、span 和 p 元素
$(:parent)
/script:animated选择当前正在执行动画的元素。:focus选择当前获得焦点的元素。
【2】表单筛选器 :input选择所有的输入元素包括 input、select、textarea 和 button 等。 :text选择所有的文本输入框即 typetext 的 input 元素。 :password选择所有的密码输入框即 typepassword 的 input 元素。 :radio选择所有的单选按钮即 typeradio 的 input 元素。 :checkbox选择所有的复选框即 typecheckbox 的 input 元素。 :submit选择所有的提交按钮即 typesubmit 的 input 或 button 元素。 :reset选择所有的重置按钮即 typereset 的 input 或 button 元素。 :button选择所有的普通按钮即 typebutton 的 input 或 button 元素。 :file选择所有的文件上传输入框即 typefile 的 input 元素。 :image选择所有的图像按钮即 typeimage 的 input 元素。 :enabled选择所有启用的表单元素。 :disabled选择所有禁用的表单元素。 :checked选取所有被选中的复选框或单选按钮元素。 :selected选取所有被选中的下拉列表select元素中的选项option。
$(input[typetext])
$(input[typepassword])// 等价于上面的操作
$(:text)
$(:password)【3】筛选器方法 .eq(index)选取指定索引位置的元素。 .first()选取第一个匹配的元素。 not(selector)从匹配的元素中去除指定的元素。 .filter(selector)根据指定的选择器筛选元素。 .has(selector)筛选包含指定选择器所匹配元素的元素。 .next()选择当前元素的下一个同级元素。 .nextAll()选择当前元素之后的所有同级元素。 .nextUntil()选择当前元素到指定元素之间的所有同级元素。 .parent()选择当前元素的直接父元素。 .parents()选择当前元素的所有祖先元素。 .parentsUntil()选择当前元素到指定元素之间的所有祖先元素。 .children()取到所有的子标签 .siblings()同级别上下所有标签 .find()根据条件筛选
