炒股网站开发,邢台市教育考试院,网页设计高端,静态网站首页更新jQuery基础语法 #不管找什么标签#xff0c;用什么选择器#xff0c;都必须要写$()#xff0c;引号里面再写选择器#xff0c;通过jQuery找到的标签对象就是一个jQuery对象#xff0c;用原生JS找到的标签对象叫做DOM对象。二者可以相互转换。$()[0]:就是jQuer…jQuery基础语法 #不管找什么标签用什么选择器都必须要写$()引号里面再写选择器通过jQuery找到的标签对象就是一个jQuery对象用原生JS找到的标签对象叫做DOM对象。二者可以相互转换。$()[0]:就是jQuery对象转DOM对象$(DOM对象)就是DOM对象转jQuery对象。 查找标签 基本选择器同css id选择器 $(#id) 标签选择器 $(tagName) class选择器 $(.className) 配合使用 $(div.c1) // 找到有c1 class类的div标签 所有元素选择器 $(*) 组合选择器 $(#id, .className, tagName) 层级选择器同css x和y可以为任意选择器 $(x y);// x的所有后代y子子孙孙
$(x y);// x的所有儿子y儿子
$(x y)// 找到所有紧挨在x后面的y
$(x ~ y)// x之后所有的兄弟y 基本筛选器选择之后进行过滤 :first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素从 0 开始计数
:odd // 匹配所有索引值为奇数的元素从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 例$(div:has(h1))// 找到所有后代中有h1标签的div标签意思是首先找到所有div标签把这些div标签的后代中有h1的div标签筛选出来
$(div:has(.c1))// 找到所有后代中有c1样式类类属性classc1的div标签
$(li:not(.c1))// 找到所有不包含c1样式类的li标签
$(li:not(:has(a)))// 找到所有后代中不含a标签的li标签 属性选择器 [attribute]
[attributevalue]// 属性等于
[attribute!value]// 属性不等于 例子 // 示例,多用于input标签
input typetext
input typepassword
input typecheckbox
$(input[typecheckbox]);// 取到checkbox类型的input标签
$(input[type!text]);// 取到类型不是text的input标签 表单筛选器多用于找form表单里面出现的input标签当然通过属性选择器找肯定也是没问题的这样就是写着简单一些 :text
:password
:file
:radio
:checkbox
:submit
:reset
:button 例子 $(:checkbox) // 找到所有的checkbox 表单对象属性: :enabled
:disabled
:checked //只用checked筛选不仅会选中点选的form表单的结果还会选中select的结果。
:selected 筛选器方法 下一个元素 $(#id).next()
$(#id).nextAll()
$(#id).nextUntil(#i2) #直到找到id为i2的标签就结束查找不包含它上一个元素 $(#id).prev()
$(#id).prevAll()
$(#id).prevUntil(#i2) 父亲元素 $(#id).parent()
$(#id).parents() // 查找当前元素的所有的父辈元素爷爷辈、祖先辈都找到$(#id).parentsUntil(body) // 查找当前元素的所有的父辈元素直到遇到匹配的那个元素为止这里直到body标签不包含body标签基本选择器都可以放到这里面使用。 儿子和兄弟元素 $(#id).children();// 儿子们
$(#id).siblings();// 兄弟们不包含自己.siblings(#id)可以在添加选择器进行进一步筛选 查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 $(div).find(p) //等价于$(div p) 筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。 $(div).filter(.c1) // 等价于 $(div.c1)从结果集中过滤出有c1样式类的从所有的div标签中过滤出有classc1属性的div和find不同find是找div标签的子子孙孙中找到一个符合条件的标签 补充和前面使用冒号的一样 :first等只不过冒号的那个是写在选择器里面的而下面的这几个是方法如此而已就不说啦 .first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素 操作标签 样式操作 样式类添加删除class类的值来修改样式 addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名如果有就移除如果没有就添加。 CSS直接修改css的属性来修改样式 css(color,red)//DOM操作tag.style.colorred 位置操作 offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移不能设置位置
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离 尺寸 height() //盒子模型content的大小就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 两个padding的高度
innerWidth()
outerHeight() //内容高度 两个padding的高度 两个border的高度不包括margin的高度因为margin不是标签的是标签和标签之间的距离
outerWidth() 文本操作 设置HTML html()// 取得第一个匹配元素的html内容包含标签内容
html(val)// 设置所有匹配元素的html内容识别标签能够表现出标签的效果 设置文本 text()// 取得所有匹配元素的内容只有文本内容没有标签
text(val)// 设置所有匹配元素的内容不识别标签将标签作为文本插入进去 查询设置值 val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值 属性操作 attr全称attribute(属性) prop全称property(属性) 虽然都是属性但他们所指的属性并不相同attr所指的属性是HTML标签属性而prop所指的是DOM对象属性可以认为attr是显式的而prop是隐式的。 attr用于自带属性等或自定义属性 attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性 prop主要用于checkbox和radio返回一个状态True和False prop() // 获取属性状态 $(#i1).attr(checked) // checked
$(#i1).prop(checked) // true 总结一下 1.对于标签上有的能看到的属性和自定义属性都用attr 2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。 具有 true 和 false 两个属性的属性如 checked, selected 或者 disabled 使用prop()其他的使用 attr() 文档处理 添加到指定元素内部的后面 $(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(){...}) //内容发生变化inputselect等
keyup(function(){...}) mouseover 和 mouseenter的区别是mouseover事件是如果该标签有子标签那么移动到该标签或者移动到子标签时会连续触发mmouseenter事件不管有没有子标签都只触发一次表示鼠标进入这个对象 事件绑定 对象.on( events [, selector ],function(){}) 1.events 事件 2.selector: 选择器可选的 3.function: 事件处理函数 移除事件 对象.off( events [, selector ][,function(){}]) off() 方法移除用 .on()绑定的事件处理程序。 $(li).off(click)就可以了 1.events 事件 2.selector: 选择器可选的 3.function: 事件处理函数 阻止后续事件执行 1. return false; // 常见阻止表单提交等如果input标签里面的值为空就组织它提交就可以使用这两种方法 2. e.stopPropagation(); 事件委托 事件委托是通过事件冒泡的原理利用父标签去捕获子标签的事件将未来添加进来的某些子标签自动绑定上事件。 示例 表格中每一行的编辑和删除按钮都能触发相应的事件。回去完善一下咱们上面的那个作业吧添加一行数据的那个作业然后我们在学习一下上面的那些绑定事件。 $(table).on(click, .delete, function () { //中间的参数是个选择器前面这个$(table)是父级标签选择器选择的是父级标签意思就是将子标签子子孙孙的点击事件委托给了父级标签 //但是这里注意一点你console.log(this)你会发现this还是触发事件的那个子标签这个记住昂// 删除按钮绑定的事件
}) 页面载入 两种写法 $(document).ready(function(){// 在这里写你的JS代码...
}) 简写 $(function(){
// 你在这里写你的代码
}) 与window.onload的区别 1.window.onload()函数有覆盖现象必须等待着图片资源加载完成之后才能调用 2.jQuery的这个入口函数没有函数覆盖现象文档加载完成之后就可以调用建议使用此函数 动画效果 // 基本 show([s,[e],[fn]]) $(.c1).show() //show(5000),就是5秒之后显示出来这个标签并且有一个动画效果搞个img图片看看效果后面两个参数先不用管
hide([s,[e],[fn]]) $(.c1).hide()
toggle([s],[e],[fn])//这几个toggle的意思就是你原来是什么效果我就反着来 // 滑动拉窗帘一样 slideDown([s],[e],[fn]) //使用的时候别忘了给标签设置一个高度和宽度其实就是控制你的标签高度如果你写$(#di).slideUp(5000)意思就是5秒内把你的高度变为0//还有如果你直接操作的是img标签和操作img标签的父级标签两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn]) // 淡入淡出控制透明度 fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度0-1的区间意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]]) // 自定义了解即可 animate(p,[s],[e],[fn])转载于:https://www.cnblogs.com/NoteBook3013/p/10567702.html
