目录
jQuery框架操作
1.筛选器方法
1.1 下一个元素：next、nextAll($("#id").)nextUntil($("#id").nextUntil("#i2")两个指定元素之间)
1.2 上一个元素：prev、prevAll、prevUntil($("#id").) previous(上一个)
1.3 父元素：parent、parentAll、parentUntil
1.4 儿子与兄弟：children()、siblings()
注：查找：$("div").find("p") 查找div后代中的所有p标签===$("div p")
筛选：$("div").filter(过滤)(".c1") 从div中查找类为c1的数据===$("div.c1")
补充：.first(第一个)、.last(最后一个)、.not(从匹配出的元素集合中删除指定的元素)
.has(保留特定后代 去掉不含指定后代)、.eq(索引值等于指定值的元素)
2.操作标签
2.1 样式类：addClass(); // 添加指定的CSS类名
removeClass(); // 移除指定的CSS类名
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加
2.2 css操作：$("p").css("color", "red");
2.4 位置操作：offset()； // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position(); // 获取匹配元素相对父元素的偏移
scrollTop(); // 获取匹配元素相对滚动条顶部的偏移
scrollLeft(); // 获取匹配元素相对滚动条左侧的偏移
2.5 尺寸：height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
2.6 文本操作：
HTML代码：html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
| 类型 | JS | jQuery | 说明 |
|---|---|---|---|
| 样式类 | classList.add(cls) | addClass(cls) | 添加类 |
| classList.remove(cls) | removeClass(cls) | 删除指定的类 | |
| classList.contains(cls) | hasClass(cls) | 判断是否存在 | |
| classList.toggle(cls) | toggleClass(cls) | 存在删除 不存在添加 | |
| 样式操作 | cEle(查找标签).style.color = "red" | $("p").css("color","red") | 颜色设置 |
| 位置操作 | e.offset | offset() | 当前窗口的相对偏移或设置元素位置 |
| e.offsetParent | position() | 元素相对父元素的偏移 | |
| e.offsetTop | scrollTop() | 匹配元素相对滚动条顶部的偏移 | |
| e.offsetLeft | scrollLeft() | 元素相对滚动条左侧的偏移 | |
| 尺寸操作 | height | 高 | |
| width | 宽 | ||
| window.innerHeight | $(window).innerHeight() | 浏览器窗口的内部高度 | |
| window.innerWidth | $(window).innerWidth() | 浏览器窗口的内部宽度 | |
| 文本操作 | divEle.innerText | text() | 获取元素的内容 |
| 属性操作 | setAttribute() | attr(attrName) | 匹配第一个元素 |
| getAttribute() | attr(attrName,attrValue) | 为所有匹配元素设置一个属性值 | |
| checked | prop() | 获取属性 | |
| removeProp() | 移除属性 | ||
| append() | append() | 添加 | |
| remove() | |||
| empty() |
jQuery事件
1.绑定事件
| 类型 | JS | jQuery |
|---|---|---|
| 绑定事件 | input type="button" value="点我" onclick = func() | jQuery对象.事件名(function(){事件代码}) |
| 标签对象.on事件名 = function(){事件代码} | jQuery对象.on('事件名',function(){事件代码}) |
2.阻止后续事件
2.1 触发form表单提交数据动作的标签
<input type = "submit">
<button></button>
注：给已经有事件的标签绑定事件 会先执行绑定 再去执行默认的事件
可以之前事件不执行 return false
3.事件冒泡
3.1 涉及到标签嵌套并且有相同事件的时候 会逐级往上反馈并执行<body>
<div class="c1">
<div class="c1">
<button class="c1">点我</button>
</div>
</div>
<script>
$('.c1').on('click','button',function () {
alert('善良')
})
</script>
</body>
解决办法
<body>
<div class="c1">
<div class="c1">
<button class="c1">点我</button>
</div>
</div>
<script>
$('.c1').on('click','button',function () {
alert('善良')
})
</script>
</body>
//解决办法
$("span").click(function (e) {
alert("span");
return false; 方式1
e.stopPropagation(); 方式2
});
4.事件委托
4.1 创建标签的方式
JS document.createElement()
jQuery $("<标签名>")
4.2 事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托(标签内部的标签)
$('div').on('click','button',function () {
alert('善良')
})
动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
Bootstrap框架
1.网址 ：https://www.bootcss.com/
2.图标网站：http://www.fontawesome.com.cn/
3.使用：提前写好了所有的标签样式 直接拷贝使用即可
注：使用之前需要先导入 bootstrap涉及到JS的部分需要使用jQuery
4.内容：布局容器、栅格系统、全局CSS样式、组件
5.实操
<body>
<div id="webPageFrame">
<div class="leftFrame">
<p class="text-center">落叶知秋</p>
</div>
<div class="autoFrame">
<p><span>人间寒橘柚 秋色老梧桐</span></p>
<p><span>落叶知秋 清风徐来</span></p>
<p><span>所有完美不期而至</span></p>
</div>
<div class="rightFrame">
<p><span class="glyphicon glyphicon-plane">看的风景</span>
</p>
<p><span class="glyphicon glyphicon-glass">吃的美食</span></p>
<p><span class="glyphicon glyphicon-film">看的电影</span></p>
<p><span class="glyphicon glyphicon-grain">落叶</span></p>
</div>
</div>
</body>