目录
一、jquery介绍
1、是一个javascript类库
2、以最少的代码实现更多的功能
3、优势：
4、版本拓展：是否兼容IE678
二、基础核心
1、代码风格
2、加载模式
3、对象互换
三、选择器
1、最核心 选择引擎
2、使用
3、拓展：容错功能
4、拓展：选择器复杂度
一、jquery介绍
1、是一个javascript类库
通过封装原生的javascript函数从而得到一套完整的方法
2、以最少的代码实现更多的功能
3、优势：
（1）像CSS操作那样操作DOM
（2）修改CSS方便简单
（3）简化JS代码操作
（4）事件处理更加容易
（5）各种动画效果
（6）ajax更加完美
（7）大量插件 （eg：日历）
（8）量大的优势： 特别方便
4、版本拓展：是否兼容IE678
（1）成本控制
（2）用户选择
<1>高质量
<2>低质量 （创业初期可以考虑放弃）
（3）项目侧重点
（4）用户体验
（5）数据支持
（6）教育用户
（7）总而言之：视情况而定
二、基础核心
1、代码风格
（1） $function(){}; （匿名函数的执行）
（2）$("#div1") （选取元素）
（3）$("#div1").css('color','red') （添加内联样式）
（4）$ == jQuery （js封装好的一个对象）
2、加载模式
（1&#load
<1>全部资源加载完毕
<2>只能执行一次，会覆盖前边的
<3>不能简写
(2)$(document).ready(function() {});
<1>DOM结构加载完毕
<2>可多次执行
<3>可简写 $(function() {});
3、对象互换
这个互换多指JQuery对象于DOM对象互换
(1)DOM对象转成JQuery对象：$(DOM对象)
(2)JQuery对象转换成DOM对象：JQuery对象[index]
三、选择器
1、最核心 选择引擎
继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择
2、使用
（1）id选择器 （#div1）
（2）标签名选择器 （div）
（3）class选择器 （.div1）
（4）后代选择器
<1>header div
<2>$("header div")等价于 $("header").find("div")
（5）子代选择器 header>div
<1>IE6不支持
<2>$("header>div") 等价于 $("header").children('p')
（6）第一个元素：：first
（7）最后一个元素：：last
（8）所有偶数元素：：even
（9）所有奇数元素：：odd
（10）根据下标进行选择元素：：eq(n)
（11）根据属性进行选择元素：[title]
3、拓展：容错功能
很多情况下动态DOM生成会有问题
4、拓展：选择器复杂度
选择器越复杂，字符串解析越慢
html文件代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jq</title>
</head>
<body><li>一群男人的故事</li><li>人与自然的故事</li><li>105个男人与3个女人的故事</li><li>一群女人与一个男人的故事</li><div id="ok"><div class="ok1"><div><p>1</p><p>2</p></div><div><p>3</p><p>4</p></div><div><p>5</p><p>6</p></div></div><div class="ok2"><div><p>7</p><p>8</p></div><div class="nt"><p>9</p><p>10</p></div><div><p>11</p><p>12</p></div></div></div>
</body>
<script src="js/jq.js"></script>
<script>// $(' #ok .ok .nihao div li ')var els = $("#ok .ok1 p");// 链式语法：（因为都返回this）$("#ok .ok2 .nt p").css({color: "red",fontSize: "30px"}).css({backgroundColor: "yellowgreen"});console.log(els);
</script>
</html>js文件代码：
// arg div .ok #yes div ul li
// 对外使用的方法
function $(arg){// 通过arg(类似css选择器) 获取指定的标签// 返回一个数组return _getEls(arg);}// 自定义内部使用方法
arg = ' #ok .ok .nihao div li '
function _getEls(arg){// 将arg规范化// arg首位首位没有空格，中间只有一个空格var reg = /^s+|s+$/g;arg = place(reg, '');// console.log("ok===="+arg);reg = /s+/g;arg = place(reg, ' ');// console.log(arg);// 将arg分隔为数组var arr = arg.split(' ');// console.log(arr);// arr = ["#ok",".ok",".nihao","div","li"];// 需要工具var parent = [document];var children = [];// 遍历arrfor(var i=0;i<arr.length;i++){var s = arr[i]; //当前的查询项for(var j=0;j<parent.length;j++){// 遍历当前查询项的父级var p = parent[j];var subarr = _getChildByParent(p,s);children = at(subarr);}parent = children; //子级成为父级children = [];}return parent;
}function _getChildByParent(p,s){var c = s.charAt(0); //获取查询项的首字母var arr = [];if(c === "#"){c = s.substring(1);arr = [p.getElementById(c)];console.log(arr);}else if(c === "."){c = s.substring(1);var els = p.getElementsByClassName(c);for(var i=0;i<els.length;i++){arr.push(els[i]);}}else{var els = p.getElementsByTagName(s);for(var i=0;i<els.length;i++){arr.push(els[i]);}}return arr;
}// 为数组的原型添加一些新的方法
// 继续简化DOM操作
Array.prototype.css = function(obj){this.forEach(function(el){for(var x in obj){el.style[x] = obj[x];}})return this;
}运行结果：
本文发布于:2024-02-05 05:52:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170725621663595.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
