首页 > 其他分享 >jQuery

jQuery

时间:2023-04-18 17:45:49浏览次数:37  
标签:jQuery jquery 标签 元素 div 属性

目录

jQuery

# jQuery它的内部封装了很多的js代码,并且额外增加了很多功能----->它就是js 的一个类库
'''在python中,我们有模块这个概念,js中没有模块的概念,与类库的概念,类库就相当于是我们的模块'''
# 使用了jquery我们能够写更少的js代码了,所以,以后我们也大多时候都会写jquery代码,而很少写js代码了
jquery是对js 的一个高度封装,我们直接学习封装之后的代码

# jquery介绍:
1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。------->使用jquery不能担心兼容性问题
2. 它的宗旨就是:“Write less, do more.“ #
3. 要想使用jquery,必须下载使用它,然后引入都我们的html文档中
4. 下载的这个jquery文件大小只要即是KB,很小,几乎不影响加载速度

# 学习jQuery内容:
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax(放在Django中学---》重要)
# jQuery版本
1.x
2.x
3.x # 直接学习最新版本

# jQuery文件去哪里下载?
1. 去官网:https://jquery.com/
2. 第三方:https://jquery.cuishifeng.cn/index.html
3. bootcdn网站下载:https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
4. 使用jquery文件有两种方式:
	1、 把文件下载下来,离线使用
    2、 不下载,直接通过cdn链接使用(你的电脑必须有网)
5. 下载。

# jquery基本使用
jQuery("selector").action()
jQuery("#d1").css('color', 'red');
# jQuery === $
jQuery("#d1").css('color', 'red');=============>$("#d1").css('color', 'red')

# 学习jQuery的步骤:
1. 先学会如何查找标签
2. 找到标签之后在进行操作标签

先学会如何查找标签

基本选择器

1. id			$("#id")
2. class		$(".className")
3. 标签选择器     $("tagName")

补充:标签对象和jQuery对象

var h1 = $("#h1");  // S.fn.init(1) =================> 它是jquery对象,标签对象

'''两个对象之间可以进行互相转换'''
jquery对象转为标签对象:
    	# 直接通过下标取值
标签对象如何转为jquery对象:
	document.getElementById('id')================>$(document.getElementById('id'));
'''如果是jquery对象的话,可以使用jquery给你封装的好多好多的方法'''

其他选择器

$(".c1")-------------->具有class=c1的所有标签
$("div.c1")-------------->具有class=c1的div标签

基本筛选器:

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子:

$('ul li:first')  # 大儿子 
$('ul li:last')  # 小儿子
$('ul li:eq(2)')		# 放索引
$('ul li:even')  # 偶数索引 0包含在内
$('ul li:odd')  # 奇数索引
$('ul li:gt(2)')  # 大于索引
$('ul li:lt(2)')  # 小于索引
$('ul li:not("#d1")')  # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

表单属性选择器

属性选择器:

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子:
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器:

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子:
$(":checkbox")  // 找到所有的checkbox
$('input[type="text"]')---------->$(':text') 
$('input[type="password"]')---------->$(':password') 

表单对象属性

:enabled
:disabled
:checked
:selected

例子:
找到可用的input标签
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option:
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option


$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

筛选器方法

# 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

# 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

# 父亲元素:
$("#id").parent()

# 儿子元素
$("#id").children();// 儿子们
var div = $('#d1').children()[0];
console.log(div);

# 查找
$("div").find("p")----------------->等价于$("div p")
$(".c1").find("a")----------------->等价于$(".c1 a")

# 补充:
.first() // 获取匹配的第一个元素
  	$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
      $('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
      $('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

样式操作

classList.add()------------------>addClass();// 添加指定的CSS类名。
classList.reomve()----------------->removeClass();// 移除指定的CSS类名。
classList.containes()------------------>hasClass();// 判断样式存不存在
classList.toggle()--------------->toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。

文本操作(掌握)

innerHTML--------------->html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

label的作用

image
image
当你选择label里面的文本时会自动跳转到id对应的表单对象中(也就是图片的输入框内)

$("input[name='gender']:checked").val()
可以得到input标签中name属性等于gender被checked的value值

属性操作

用于ID等自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

prop和attr的区别:
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的

举个例子:
<input type="checkbox" id="i1" value="1">
针对上面的代码,
$("#i1").attr("checked")  // undefined
//(会获得这个标签的v值)

$("#i1").prop("checked")  // false
//存在就true,不存在就false,自定义属性undefined
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')          
$('#d1').append($pEle)  # 内部尾部追加

createElement('p') ----------->		$('<p>')
appendChild()			 ----------->	append()

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

替换 克隆

replaceWith()
replaceAll()

clone()// 参数

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

标签:jQuery,jquery,标签,元素,div,属性
From: https://www.cnblogs.com/whxx/p/17330474.html

相关文章

  • jQuery Templates模板插件
    jQuery团队提供了一个模板插件,但非常可惜的是jquery团队放弃对其维护,我们对其方法和语法进行简单简绍源码官方的网址:http://api.jquery.com/category/plugins/templates文档的网址:http://api.jquery.com/category/plugins/templates使用该插件必须先引入对应js //依赖jquery<sc......
  • python s12 day13 JavaScript、Dom和jQuery
    1.JavaScriptJavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。1、JavaScript代码存在形式<!--方式一--><scripttype"text/javascript"src="JS文件"></script>......
  • jquery中prop()方法和attr()方法的区别
    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢?大家都知道有的浏览器只要写dis......
  • jquery ui datepicker使用
    $("#regDate").datepicker({showMonthAfterYear:true,//月在年之后显示changeMonth:true,//允许选择月份changeYear:true,//允许选择年份dateFormat:'yy-mm-dd',//设置日期格式closeText:'关闭......
  • jquery ajax queue
    //第一个ajax请求$(document).queue("ajaxRequests",function(){//全局变量,储存第一个ajax请求数据vara_data;$.ajax({success:function(data){a_data=data......
  • jquery实现 距今天数
    //计算与2018年3月25日的时间差vardate1=newDate("2018-03-2500:00:00");vardate2=newDate();vardate3=date2.getTime()-date1.getTime();//时间差的毫秒数//网站已稳定运行xx天xx小时vardays=Math.floor(date3......
  • ajax使用回调函数的例子(原生代码和jquery代码)
    ajax使用回调函数的例子(原生代码和jquery代码)一、 ajax代码存在的问题(异步交互的问题)ajax所请求的url,如果因为网络等问题,很久没有回应,则给用户造成“假死”的现象。代码如下:xmlHttp=GetXmlHttpObject();xmlHttp.open();xmlHttp.send();//下面这句,会一直等待,直到有返回值......
  • jquery ajax contentType为application/json及设置请求头header
    1.找了好久发现contentType一般为默认的application/x-www-form-urlencoded,这次post请求后台限定了为application/json2.当设置contentType为application/json还是出错时,把data也要转换一下$.ajax({method:"POST",url:"",contentType:'application/json',......
  • jQueryUI教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介JqueryUI入门教程-从基本到高级概念的简单简单步骤了解JqueryUI,其中包括概述,环境设置,交互,可拖动,可放置,可调整大小,可选,可排序,小部件,手风琴,自动完成,按钮,Datepicker,对话框,菜单,Progressbar,Slider,Spinner,Tabs,Tooltip,Effects,AddClass,ColorAnimation,Effect,Hide,RemoveClass......
  • SpringMVC中使用引入jquery不能加载页面
    今天在学习springMVC的json数据绑定时,需要使用到jquery发送ajax请求。但是当我通过是<script>标签引入了jquery.js。但是当我访问该jsp的时候就是不显示页面的内容我一直以为时SpringMVC的servelt拦截器拦截了静态资源,但是我过滤了静态资源还是不显示。后来才发现,我把<script......