爱站程序员基地jQuery学习笔记(一)
概念
jQuery:
是一个轻量级的JavaScript函数库，用来简化JS开发。
优点：写的少做的多 简化了dom操作，优化了事件机制
具有强大的元素选择器，使用的是css1-css3所有的选择器
1.jQuery的引入
所有jQuery的操作都依赖于jQuery库的支持。在写代码之前需要先进行引入! 以下都是引入如图的jQuery库。
在源码中，jQuery是一个函数，该函数内部返回。
在jQuery库中，$ 是jQuery的简写形式，需要使用标识符$来完成代码。
如下：
$(window).ready(function (){console.log(\"dom加载完成\");})；
简写如下：
function (){console.log(\"简写\");});
2.jQuery选择器
jquery : dom元素获取返回的集合类型
选择器 —–dom元素获取
声明部分：
<button class=\"btn\" id=\"anniu\">按钮</button><button class=\"btn\" id=\"anniu1\">按钮</button><button class=\"btn\">按钮</button><button class=\"btn\">按钮</button><button class=\"btn\">按钮</button><button class=\"btn\">按钮</button><ul class=\"menu\"><li>1</li><li>2<ul class=\"child\"><li>21</li><li>22</li><li>你好</li></ul></li><li>3</li><li>4</li></ul><h1>111</h1><h2>111</h2><h3>111</h3><h4>111</h4><div></div><div></div><ul id=\"nav\"><li>1</li><p>2</p><li>3</li><p>4</p><li>5</li><p>6</p></ul><input type=\"text\" id=\"user\" class=\"ipt\"/><input type=\"text\"/><input disabled type=\"password\"/><input type=\"image\"/><input disabled type=\"file\"/><input type=\"submit\"/><input type=\"reset\"/><input type=\"button\"/><input type=\"radio\" checked/><input type=\"radio\"/><input type=\"checkbox\" checked/><input type=\"checkbox\"/><textarea></textarea><select><option value=\"\">选择</option><option value=\"\">宝鸡</option><option value=\"\" selected>西安</option></select><span id=\"#span\">特殊字符</span><span class=\"+span\">特殊字符</span>
代码部分：
console.log($(\"button\"));console.log($(\".btn\"));console.log($(\"#anniu\"));console.log($(\"#anniu,#anniu1\"));console.log($(\"ul li\"));console.log($(\"ul.menu>li\"));console.log($(\"ul.menu>li:nth-child(1)+li\"));console.log($(\"ul.menu>li:nth-child(1)~li\"));console.log($(\"ul.menu>li:first\"));console.log($(\"ul.menu>li:first-child\"));console.log($(\"ul.menu>li:not(.child)\"));//not(selector)console.log($(\"ul.menu>li:even\"));//索引值为偶数console.log($(\"ul.menu>li:odd\"));//索引值为奇数console.log($(\".menu>li:eq(2)\"));//索引值console.log($(\".menu>li:lt(2)\"));//小于console.log($(\".menu>li:gt(2)\"));//大于console.log($(\"body:header\"));$(\"input\").focus(); //默认获得焦点console.log($(\"body :focus\"));console.log($(\":root\"));//根console.log($(\"ul li:contains(2)\")); //内容包含console.log($(\"ul li:contains(你)\"));console.log($(\"div:empty\"));//空console.log($(\"ul.menu:has(.child)\"))//含有该选择器console.log($(\"div:parent\"));//匹配的元素必须有子元素或者内容 也就是匹配该元素为父元素console.log($(\":visible\"));//可见console.log($(\":hidden\"));//隐藏console.log($(\"input[type]\"));console.log($(\"input[type=\'text\']\"));console.log($(\"input[type^=\'t\']\"));//以什么开始console.log($(\"input[type$=\'t\']\"));//以什么结尾console.log($(\"input[type*=\'t\']\"));//包含什么console.log($(\"input[type][class][id]\"));//复合写法console.log($(\"#nav>li:first-child\"));console.log($(\"#nav>li:last-child\"));console.log($(\"#nav>li:first-of-type\"));console.log($(\"#nav>li:last-of-type\"));console.log($(\"#nav>li:nth-child(3)\"));console.log($(\"#nav>li:nth-last-child(2)\"));console.log($(\"#nav>li:nth-of-type(2)\"));console.log($(\"#nav>li:nth-last-of-type(2)\"));console.log($(\":input\"));console.log($(\":text\"));console.log($(\":password\"));console.log($(\":radio\"));console.log($(\":checkbox\"));console.log($(\":submit\"));console.log($(\":reset\"));console.log($(\":file\"));console.log($(\":image\"));console.log($(\"input:disabled\"));//不可用console.log($(\"input:enabled\"));//可用console.log($(\"input[type=radio]:checked\"));//默认选择console.log($(\"select>option:selected\"));//$.escapeSelector(\"#span\") 3.0+以上版本console.log($.escapeSelector(\"#span\"));console.log($(\"#\"+$.escapeSelector(\"#span\")));// \\#spanconsole.log($(\".\"+$.escapeSelector(\"+span\")));// \\#span
3.属性操作
在jQuery中可以进行堆操作
属性操作：获取或者设置属性的值
声明部分：
<input type=\"text\" id=\"ipt\" value=\"123\" class=\"info\"/><input type=\"text\" id=\"ipt1\" value=\"789\" class=\"info\"/><input type=\"checkbox\" class=\"ckbox\"/>篮球<input type=\"checkbox\" class=\"ckbox\"/>足球<input type=\"checkbox\" class=\"ckbox\"/>乒乓球<button id=\"fbtn\">反选</button><div class=\"box block\"></div><input type=\"text\" id=\"list\"/><div class=\"content\"></div><input type=\"checkbox\" class=\"hobby\" value=\"a\"/>篮球<input type=\"checkbox\" class=\"hobby\" value=\"b\"/>足球<input type=\"checkbox\" class=\"hobby\" value=\"c\"/>羽毛球<style>div{border: 1px solid #000;}.box{width: 100px;height: 100px;}.box1{width: 200px;height: 200px;}</style>
代码部分：
console.log($(\"#ipt\").attr(\"value\"));//获取$(\"#ipt\").attr(\"value\",\"456\");//修改//回调函数写法 参数为当前索引和内容$(\"#ipt\").attr(\"value\",function(index,val){console.log(index,val);return val*val;})//作用同上console.log($(\".info\").attr(\"value\"));$(\"#ipt\").removeAttr(\"value\");//移除console.log($(\"#ipt1\").prop(\"value\"));$(\"#ipt1\").prop(\"value\",\"abc\");$(\"#ipt1\").prop(\"value\",function(index,val){console.log(index,val);return val+\"m\";})$(\"#ipt1\").removeProp(\"value\");$(\"#ipt1\").removeAttr(\"value\");//自定义属性$(\"#ipt1\").attr(\"data-index\",0);console.log($(\"#ipt1\").attr(\"data-index\"));$(\"#ipt1\").removeAttr(\"data-index\");$(\"#ipt1\").prop(\"data-page\",1);console.log($(\"#ipt1\").prop(\"data-page\"));//prop自定义属性添加无显示$(\"#fbtn\").click(function(){$(\".ckbox\").each(function(index){console.log(!undefined);$(this).prop(\"checked\",!$(this).prop(\"checked\"));})})/** class 属性操作* */$(\".block\").addClass(\"box1 user\");$(\".block\").removeClass(\"user\");//toggleclass 类别切换$(\".block\").toggleClass(\"box\");$(\".block\").addClass(function (index,elec){return \"data\";})$(\".block\").removeClass(function (index,elec){console.log(index,elec);return \"data\";});$(\".block\").toggleClass(function (index,elec){console.log(index,elec);return \"user\";},false);//文本或者值操作//html() 获取或者设置元素的内容值//text() 获取或者设置元素的文本值//val() 获取或者设置元素value$(\".content\").html(\"<span>123</span>\");$(\".content\").text(\"<sapn>123</sapn>\");console.log($(\".content\").html());console.log($(\".content\").text());//参数为当前索引和内容$(\".content\").html(function(index,val){console.log(index,val);return \"不知道\"});$(\".content\").text(function(index,val){console.log(index,val);return \"text\"});//值操作//var 获取或者设置value$(\"#list\").var(\"....\");console.log($(\"#list\").val());$(\"#list\").val(function (index,val){console.log(index,val);return \"换值\";});*//*$(\".hobby\").val([\"a\",\"\",\"c\"]);*/$(\".hobby\").eq(0).val([\"a\"]);
4.css操作
css() 用来获取或者设置元素的css
在jQuery里面可以进行链式操作 （连点操作）
声明部分：
<div id=\"box\"></div><div class=\"list\"><div class=\"block\"></div></div><style>body{position: relative;}.list{width: 200px;height: 200px;overflow: scroll;border: 5px solid #000;padding: 10px;margin: 10px;}.block{width: 500px;height: 500px;background-color: pink;}</style>
代码部分：
<script>/* $(\"#box\").css(\"width\",\"200px\").css(\"height\",\"200px\").css(\"border\",\"1px solid #000\");*/ //链式操作$(\"#box\").css({width:\"100px\",height:\"100px\",border:\"1px solid #000\",backgroundColor:\"red\"});console.log($(\"#box\").css(\"border\"));//offset 相对适口的偏移console.log($(\"#box\").offset());//position 相对父元素的偏移//父元素要进行相对定位console.log($(\"#box\").position());//scrollTop 获取或设置元素的上滑距console.log($(\".list\").scrollTop());$(\".list\").scrollTop(100);console.log($(\".list\").scrollLeft());$(\".list\").scrollLeft(100);/** width() 设置或获取* *///$(\".list\").width(300);console.log($(\".list\").width());//$(\".list\").height(300);console.log($(\".list\").height());console.log($(\".list\").innerHeight());console.log($(\".list\").innerWidth());console.log($(\".list\").outerWidth(true));console.log($(\".list\").outerHeight());</script>
5.筛选
声明：
<ul><li>1</li><li>2</li><li class=\"li3\">3</li><p>31</p><p>32</p><p>33</p><li class=\"li4\">4</li><li><span class=\"sps\">5</span></li><li class=\"li6\"><span class=\"sp\">6</span><span class=\"sp1\">61</span></li><li>7</li></ul><style>body {position: fixed;}</style>
代码：
<script>//过滤console.log($(\"ul>li\").eq(0));console.log($(\"ul>li\").eq(-1));//注意 倒着找 从-1console.log($(\"ul>li\").first());console.log($(\"ul>li\").last());//直接写名称console.log($(\"ul>li\").hasClass(\"li4\"));console.log($(\"ul>li\").is(\".li4\"));$(\"ul>li\").each(function (index) {if ($(this).hasClass(\"li4\")) {console.log($(this));}});console.log($(\"ul>li\").filter(\".li4\"));console.log($(\"ul>li\").filter(function (index) {if ($(this).is(\".li4\")) {return $(this);}}));console.log($(\"ul>li\").is(function (index) {if ($(this).hasClass(\"li4\")) {return true;}}));console.log($(\"ul>li\"));console.log($(\"ul>li\").map(function (index, obj) {//obj 是原生的js对象;return $(obj).text();}));console.log($(\"ul>li\").has(\".sp\"));console.log($(\"ul>li\").not(\".li4\"));console.log($(\"ul>li\").not($(\"ul>li\").has(\".sp\")));console.log($(\"ul>li\").not(function (index, obj) {if ($(obj).is(\".li4\")) {return obj;}}));console.log($(\"ul>li\").slice(0, 2));//查找//children() 不带参 获取元素的所有子集console.log($(\"ul>li\").children());console.log($(\"ul>li\").children(\".sps\"));console.log($(\"li:first\").parent());console.log($(\"li:first\").parents(\"body\"));console.log($(\"ul\").find(\".li4\"));console.log($(\".li4\").next());console.log($(\".li4\").nextAll(\".li6\"));console.log($(\".li4\").prev());console.log($(\".li4\").prevAll());console.log($(\"ul>li:nth-child(3)\").nextUntil(\".li4\", \"p\"));console.log($(\"ul>li:nth-child(3)\").nextAll());console.log($(\".li4\").offsetParent());console.log($(\".li4\").siblings());console.log($(\".li4\").siblings(\".li6\"));console.log($(\".li6\").add($(\".li3\")));console.log($(\".li6\").add(\"<span>123</span>\"));console.log($(\".li6\").nextAll().addBack(\"li\"));console.log($(\".li6\").contents(\'.sp1\'));console.log($(\".li6\").find(\".sp1\").end());</script>
