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>
