$
通过$符号就可以获取对象，获取实操如下
var demo = $('div');
console.log(demo);
注：
- jquery只能使用jquery方法，js对象不能使用jquery方法
- jq对象是类数组对象，转成js可以加索引值
- jq支持css2.1和css3的选择器
常用方法
- size()：length属性，通过$()获取到的jquery也有length
- size()表示元素的个数
- css()：表示计算后的css样式，返回的是字符串类型，如果想让得到后的值参与运算，则需要转成number类型，parseInt(),parseFloat()都可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding :0px;
margin: 0px;
}
#app {
width: 20%;
height: 50%;
}
p {
font-size: 80px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="app">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<script src="jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
var ps = $('p');
var div = $('app')
// console.log(ps.length);
// console.log(div);
// // ps.css('font-size', '50px');
// console.log(ps.css('border'));
// console.log(parseInt(ps.css('font-size')) + 20);
ps.on('click', function(){
//此时this指向当前元素
//将this转成jquery对象
$(this).css('backgroundColor', 'pink')
})
</script>
</body>
</html>
- jquery绑定事件：on方法或者直接事件名称定义回调函数
- 显隐方法：show(),hide()
show()出现。终点状态：display:block
hide()消失。终点状态：display:none
参数设置的是响应事件，单位是ms - 下拉：slideDown()：徐徐展开
- 上滑：slideUp()：慢慢合起
参数：不写时间参数也表示动画，默认是400ms - 切换：slideToggle()：
- 淡入：fadeIn()
- 淡出：fadeOut()
参数：可以书写时间参数也可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#demo {
width: 300px;
height: 300px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<button>下拉</button>
<button>上滑</button>
<button>切换</button>
<div id="demo">
</div>
<script src="jQuery.js" type="text/javascript">
</script>
<script type="text/javascript">
var demo = $('#demo');
var but = $('button');
but.eq(0).click(function(){
demo.slideDown();
})
but.eq(1).click(function(){
demo.slideUp();
})
but.eq(2).click(function(){
demo.slideToggle();
})
</script>
</body>
</html>
入口函数
补充（原生js与jquery入口函数的区别）：
- 原生js的固定格式写法
window.onload = function(ev){} - jquery的固定写法：
$(document).ready(function(){}) - 原生js与jquery入口函数的加载模式不同（原生js会等到dom元素加载完毕才会执行，jquery不会等到dom元素加载完毕才执行）
- 原生js如果编写了多个入口函数，后面的会覆盖前面的，而jquery不会覆盖前面的
- jquery入口函数的另外一种写法
$(function(){}) (和第二种效果一样，且其中的第一个符号都可以替换成jQuery)
核心函数
$()就代表调用jquery的核心函数
//1.接收一个函数
$(function() {
// alert('demo');
//2.接收一个字符串
var $demo = $('#demo');
var $app = $('.app');
console.log($demo);
console.log($app);
//3.接收一个代码片段
var $p = $('<p>这是p</p>');
console.log($p);
})
静态方法
$.each方法
var arr = [1, 3, 4, 6, 7];
var abc = {0:1, 1:3, 2:4};
$.each(arr, function(index, value){
console.log(index, value);
})
$.each(abc, function(index, value){
console.log(index, value);
})
$.map方法
用法于each方法类似
注：两者的区别：
- each默认的返回值是遍历谁就返回谁
- map返回的是一个空数组
- each不支持在回调函数中对遍历的数组进行处理
- map支持在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
$.trim()方法
去除字符串中的空格,参数可以传字符串
$.isWindows方法
判断参数中是不是windows，返回值为true和false
$.isArray()方法
判断参数中是否是数组，返回值也是true和false
$.isFunction()方法
判断参数中是否是函数，返回值是true或者false
$.holdReady()方法
参数传入true和false，作用是暂停resdy执行
$.holdReady(true);
$(document).ready(function(){
alert("nihao");
})
内容选择器
:empty:作用，选择内容为空，也没有子元素的指定元素
var app = $("div:empty");
:parent:作用，有内容，有子元素
var app = $("div:parent");
:contains:作用，找到包含指定文本内容
var app = $("div:contains('你好')");
:has:找到子元素中包含指定标签的元素
var app = $("dic:has('span')");
属性和属性节点
1.什么是属性？
对象身上保存的变量就叫做属性
2.如何操作属性？
对象.属性名称 = 值；
获取属性：对象.属性名称；
对象[“属性名称”] = 值；
获取属性：对象[“属性名称”];
3.什么是属性节点？
在html标签之中添加的属性就叫做属性节点
4.如何操作属性节点？
DOM元素.setAttribute(“属性名称”, “值”);//操作属性节点
DOM元素.getAttribute(“属性名称”);//获取属性节点的值
5.属性和属性节点有什么区别？
任何对象都有属性，只有DOM对象才有属性节点
操作属性和属性节点的方法
attr()方法
可以传递两个参数，如果传递一个，则代表获取属性节点；
如果传递两个参数，表示给属性节点赋值；
注意：无论获取到多少个，只会返回第一个；
如果设置的属性节点不存在，则会新增
removeAttr()方法
删除属性节点
注意：会删除所有找到的属性节点
操作属性的方法
prop方法
用法和attr()一样，区别是，prop不仅可以操作属性，还可以操作属性节点
removeProp方法
用法和removeAttr()方法一样
css类操作相关方法
addClass()
添加类
removeClass()
删除类
toggleClass()
切换类（切换：有就删除，没有就添加）
文本值相关操作
.html()
设置或者获取内部标签或者文本内容
.text()
设置或者获取内部文本内容
.vel()
设置或者获取value的内容
样式操作方法
.css()
逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");
多个设置
$.("div").css("width", "100px").css("height", "100px")
批量设置
$.("div").css（{
width: 100px,
height: 100px,
}）
位置和尺寸操作相关方法
$(“css名”).width()
.scrollTop()
设置或者获取滚动的偏移位
事件绑定
.click(click根据情况调整)(推荐使用)
$(“button”).click(function(){
})
$("button").click(function(){
})
注：部分事件不能直接添加
.on(click, )(同上)
$("button").on(click, function(){
})
注：所有事件都能添加
事件解绑
.off()
不传递参数，则移除所有事件
传递参数，则移除指定类型事件
事件冒泡和冒泡行为
1.什么是事件冒泡？
事件从下级往上级执行（如给子级标签和父级标签同时设定事件，则执行子级事件的同时父级事件也会响应）
2.如何阻止事件冒泡？
在子级事件中添加一个 return false或者event.stopPropagetion()
3.什么是默认行为？
标签自带的事件，比如超链接以及submit提交事件
4.如何阻止默认行为？
添加return false或者event.preventDefault()
事件自动触发方法
第一种：
$("button").trigger("click");
注：自动触发子级事件同时也会触发父级事件和默认行为
第二种：
$("button").triggerHandler("click");
注：自动触发子级事件但不会触发父级事件和默认行为
事件命名空间
$("button").on(click.yxy, function(){
})
通过on和自动触发事件，就可以指定事件触发
事件委托
什么是事件委托？
请别人帮忙做事，做完的结果反馈给我们
简单举例：通过事件新增的内部标签无法被直接引用另外一个事件，则需要事件委托来进行
$("ul").delegate("li", "click", function(){
console.log($(this).html());
})
移入移出事件
.mouseover()/.mouseenter()
鼠标移入
.mouseout()/.mouseleave()
鼠标移出
mouseover/mouseout，子元素触发会触发父元素
.hover()同时监听移入移出事件
传递一个参数，移入移出使用同一个方法
传递两个参数，各使用一个方法
$("div").hover(function(){}, function(){})
扩充方法（siblings()）
排它性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
/* border: 1px solid red; */
margin: 0px;
padding: 0px;
}
.demo div {
width: 200px;
height: 200px;
background-color: antiquewhite;
border: 1px solid blue;
float: left;
margin: 0px 90px;
}
.demo .app {
background-color: #0000FF;
}
</style>
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".demo>div").hover(function() {
$(this).addClass("app");
$(this).siblings().removeClass("app")
}, function(){
$(this).removeClass("app")
})
})
</script>
</head>
<body>
<div id="" class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
注：该篇博客为自己视频学习时记录下的笔记，部分内容来源于学习视频
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
