首页 > 其他分享 >jQuery和Bootstrap

jQuery和Bootstrap

时间:2022-12-07 17:48:38浏览次数:36  
标签:jQuery 标签 Bootstrap 选择器 查找 div id

目录

jQuery查找标签

基本选择器

$('#d1')	id选择器
$('.c1')	class选择器
$('div')	标签选择器

组合选择器

$('div#d1')  查找id是d1的div标签
$('span.c1') 		 查找含有c1样式类的span标签
$('div,span,p')		 查找div或者span或者p标签
$('#d1,.c1,span')	 查找id是d1的或者class含有c1的或者span标签

层级选择器

$('div p')			查找div里面所有的后代p标签
$('div>p')			查找div里面的儿子p标签
$('div+p')			查找div同级别下面紧挨着的p标签
$('div~p')			查找div同级别下面所有的p标签

属性选择器

$('[username]')			查找含有username属性名的标签
$('[username="jason"]')	查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

基本筛选器

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

表单筛选器

$(':text')
$(':password')

$(':checked')		checked与selected都会找到
$(':selected')		selected

筛选器方法

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

操作标签

1.class操作
	 addClass()							classList.add()
    removeClass() 						classList.remove()
    hasClass() 							classList.contains()
    toggleClass()						classList.toggle()
2.位置操作
	 $(window).scrollTop()
3.文本操作
	 text()					innerText
 	 html()					innerHTML
  	 val()					value
    jQuery对象[0].files	  files[0]
4.创建标签
	document.createElement()  $('<a>')
5.属性操作
	attr()/removeAttr()					 xxxAttribute()
	attr针对动态变化的属性获取会失真
 		prop('checked') prop('selected')
6.文档处理
	$(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()// 删除匹配的元素集合中所有的子节点。

jQuery事件

事件相关补充

jQuery动画效果(了解)

Bootstrap页面框架

核心部分讲解

重要样式

组件

标签:jQuery,标签,Bootstrap,选择器,查找,div,id
From: https://www.cnblogs.com/winter-yu1989/p/16963790.html

相关文章