jQuery入门

封闭函数(封闭空间)--- 不能哪用哪调

;;(function(){
    被封装的函数    --------   已经重复的
})（）
 
！function(){
                     ---------   考虑到会重复
}
 
~ function(){
                     ---------   考虑到会重复
}

jQuery 和 vue 都是别人用js封装好的函数库
jq入口函数就是jq事件的语法

$(目标).事件属性（function（参数）{命令}）

可以有多个
语法

完整写法

$(document).ready(funtion(){ })

简写$(匿名函数)

$(function(){ })

jq选择器

和css完全相同的选择器
$（选择器）查找功能函数 ------ 选择函数
+jq自己新增的选择器

jq常用选择器

选择器转移（选择集转移）

// $('.box').next().css('background', 'green')
// $('.box').prev().css('background', 'green')
// $('.box').nextAll().css('background', 'green')
// $('.box').prevAll().css('background', 'green')

选择器过滤

// $('li:first').css('background', 'green')
// $('li:last').css('background', 'green')
// equal等于 eq()选中下标等于某个数字的标签
//**** $('li:eq(1)').css('background', 'green')
// **** $('li').eq(0).css('background', 'green')
// $('li').not('.box').css('background', 'green')
// 选中某个属性等于某个值的标签
// $('img[alt=aaa]').css('background', 'green')
$('.box1').has('p').css('background', 'green') // has选中父
$('.box2').find('p').css('background', 'green') // find选中子级
// 选中某个属性等于某个值的标签
// $('img[alt=aaa]').css('background', 'green')

jq控制html内容

$('选择器').html() 修改内容
括号里面写内容就是修改没写访问

控制css属性

单属性caozuo

单属性控制

$('选择器').css(对应的key值，要修改的值)

单属性访问

$('选择器').css(对应的key值)

多属性操作

多属性只能修改

$（'选择器'）.css（{'width':'500px','font-size':'60px'}）
可以省略单位 key 可以不加引号数值不加引号

排他思想（小实例--- 点谁谁变绿）

同级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 这个--this标签的背景色是绿色 -- this指向发生事件的标签 -- $(this)
// $(this).css('background', 'green')
// // 控制这个标签的兄弟标签不能是绿色的 -- 红色
// $(this).siblings().css('background','')
 
$(this).css('background', 'green').siblings().css('background','')
})
})
</script>
</head>
<body>
<!-- 同级 兄弟 -->
<!-- siblings用来制作排他思想：只许州官放火不许百姓点灯 -->
<!-- 很多个按钮：点谁谁变绿 -->
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>