首页 > 代码库 > js_JQ

js_JQ

2024-08-14 12:06:00   224人阅读

JS——01（课堂代码）
1、JavaScript常识：
      a、JavaScript与Java没有任何关系（原因是这名只是因为当时Java较火，命名者为了让人知道才取的这名）；
      b、JS是最通用的脚本（让浏览器的行为去模仿人的行为叫脚本）语言，没有之一；
      c、JS由三部分组成：
            1、ECMAScript：基本语法和标准
            2、DOM（文档对象模型）：文档（HTML文档）对象
            3、BOM：浏览器对象
       d、html：网站内容
              CSS：网站的样式
                JS：网站交互，数据传输
2、JS的引入：
        a、在HTML文档中通过script标签去写JS代码。eg：<script>js代码</script>（script标签可以写在head里（head标签下的script(缺点是有先后数据的类型可能无用，一般推荐写在body外面)），可以写在body里，也可以写在body关闭标签后面（推荐写在body关闭标签后面），也可以由外部引入）
3、JavaScript可以有这两种标签引入：
        a、<script type="text/javascript"></script>以下两种写法都对（是否有type）一般现在写不带type的（因为浏览器都识别啦）
        b、<script></script>一般引入外部文件用src；eg：<script src="http://www.mamicode.com/js/test.js"></script>//在有导入的里面写JS代码不会被执行
1、变量：就是存储数据的容器！！！
   var num = 100;//声明一个变量；var是数据类型，num是变量名，=是赋值，100是初始值，;表示语句结束
   //格式：类型修饰符 变量名 = 初始值；
   //2、变量名的命名规范：有字母、数字、下划线和$组成，
   // 不能以数字开头，见名知意，不能与系统中有特殊含义的关键字重名，驼峰标识eg:gradeSchoolUniverty
   var numA = 100;
   var numB = 200;
   var numC = numA + numB;//3、声明完变量之后，通过变量名去使用变量；注意：代码是从右向左读
   alert(numC);//提醒框：alert函数；
   //声明一个字符串,用‘‘或者“”都可以
   var num = 1000;
   var string =‘0‘;
   alert(string + num + 21);//注意：+作用：1、算数运算；2、连接两个字符（数字和字符串连接的结果是 字符串！！！）
   //4、运算符： + - * / %;
   //5、表达式：由常量 变量 运算符组成；eg：a+10;
   //6、++ 和 --是自增1和自减1
   
   var bb = 100;
   bb++;//101
   var result=bb++;//bb=102,result=101;先把bb赋值给result，在自己增1；
   
   var cc = 100;
   --cc;//cc=99;
   var result2=--cc;//result2=98,cc=98;先cc自减然后再赋值，跟写在变量后面的相反；
   //a++；先赋值 在运算！！
   //++a; 先运算 再赋值！！
   
   //7、Bool类型(只有两个值 真(true)和假(false))
   var ye=true;
   var nn=false;
   //8、任何表达式都有返回结果；eg：5>3表达式为真，返回结果就是true;
   //9、 > < <= >= == != （关系运算符）其中==是判断是否相等,区别于赋值运算符= !=是判断是否不相等
   //10、条件语句if
   /*
    if（条件表达式）{}
    如果条件表达式的结果为true，就执行if后面{}里的内容
    否则执行else后面{}里的内容（也就是条件不成立时执行的）（if可以单独使用也可以与else一起使用）
    */
   if(5 == 3){
    alert(‘5确实大于3‘);
   }
   else{
    alert(‘5不等于3‘);
   }
   //11、逻辑运算符：逻辑与 && 逻辑或 || 逻辑非 ！
   //运算符的两侧连接的是表达式！！！
   var x = 10;
   var y = 20;
   var z = 30;
   //逻辑表达式的用法
   var res = x > y && z > x;
   alert(res);
   //注意：
   //逻辑与：都为真才是真；
   //逻辑或：有一个为真就为真； 
   
   //验证数据类型 typeof()函数
  </script>
 </head>
 <body>
  <!--body里的script-->
  <script></script>
 </body>
 <!--body外的script（推荐写法）-->
 <script></script>
</html>
 
第二天：
 
//获取HTML文档的元素（标签）
   //document可以理解为当前的HTML文档
   //.可以理解为‘的’
   //getElementById（）是JS的函数（意思是通过ID得到元素）
//如果点击btn的onclick被触发（onclick接收函数类型）
 
//数组：存储多个数据的容器
  //声明一个数组,使用系统关键字new
  //数组名[索引]=初始值（索引从0开始）
  /*var arrayTest = new Array();
//用for循环输出数组中的每个元素
  //arrayTest.length表示数组长度
//声明数组的第二种方法(声明的同时进行赋值)
  //var arrayTest = new Array("ABC","DEF","GHT");
  //访问数组中的元素(数组名[索引])
  //arrayTest[2];
  //遍历数组：用for循环访问数组中的每一个元素
  //for (var i=0;i<arrayTest.length;i++) {
  // console.log(arrayTest[i]);
  //}
  //声明数组的第三种方法(语法糖写法)与上面var arrayTest = new Array("ABC","DEF","GHT")本质一样
  // var arrayTest = ["ab", "cd", "ef"];
//第一种交换方法:利用中间变量的思想！！！（重要）
  var a = 3,b = 5,c;
// c=a;
// a=b;
// b=c;
  //第二种方法：
  a=a+b;
  b=a-b;
  a=a-b;
  console.log("a="+a);
  console.log("b="+b);
//鼠标滑过onmouseover
// //for循环的语法结构
  // for (初始化语句;条件表达式;控制语句) {
  // //循环语句
  // }
  //for循环的执行顺序（重要）
  //for(A;B;C){D}
  //A——>B——>——D——>B——>成立——>D——>C——>B
  //A——>B——>D——>B不成立跳出整个for语句
  // for (var i = 0; i < 5; i++) {
  //// alert会阻塞当前程序
  // alert(i);
  //// 在浏览器控制台输出内容(通常做调试)
  // console.log(i);
  // }
parseInt()函数：取整，不考虑四舍五入；eg：parseInt（89/10）=8
//Math.random()*(上限-下限+1)+下限；
  //eg： Math.random()*(20-4+1)+4;
<!--
 程序执行的三种方式
 1、顺序执行
 2、分支结构 if
 3、循环语句for：条件成立时，反复执行某段代码
-->
//一共执行16次
  /*for(var i = 1; i < 5; i++) {
   for(var j = 1; j < 5; j++) {
    console.log(i + " " + j);
   }
  }*/
  //i=i+3;等效于i+=3(+= -= *= /= %=都一样的道理（但是这种写法执行效率高）)
//求三者中的中间值
//没有给初始值，运行时出现undefined（表示未定义）；
//其他声明变量的写法：var a=10, b=20, c=30;或者var m , n;m=10,n=20;
//if分支语句的第三种写法
/*if(条件1){
 语句1;
}else if (条件2) {
 语句2;
} else if(条件3){
 语句3;
}else{
 语句4;
}
*/
//var a=47,b=-20,c=80;
//var max=a>b?a:b;
//max=max>c?max:c;//最大值
//var min=a<b?a:b;
//min=min<c?min:c;//最小值
//var middleNum=(a+b+c)-max-min;//中间值
//alert(middleNum)
//总结： ？ ： 三目运算符
//使用方法： 表达式 ？值1 ：值2；
//当表达式结果为真，整个表达式的结果为值1；
//当表达式结果为假，整个表达式的结果为值2；
//使用场景：在求最大值最小值问题时，极为方便。
 
node.replaceChild (newnode,oldnew ) //节点替换
 
History对象：
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
语法：window.history.[属性|方法]
属性：length（返回浏览过的网页个数）
方法：back（回到当前的前一个页面）
            go（回到当前的后一个）（已加载过得页面）
            forward（加载下一个页面）。
 
 
JQ网站：
链接】jQueryAPI3.1中文文档|jQueryAPI中文在线手册|jque
http://jquery.cuishifeng.cn/index.html
 
 
 
【链接】jQuery语法
http://www.runoob.com/jquery/jquery-syntax.html
 
$()下的常用方法
has()
not()
filter()
next()
prev()
find()
eq()
index()
attr()
 
$()下的常用方法
addClass() removeClass()
width() innerWidth() outerWidth()
insertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()
remove()
on() off()
scrollTop()
 
$()下的常用方法
ev pageX which  
preventDefault stopPropagation
one()
offset() position()
offsetParent()
val()
size()
each()
$()下的常用方法
hover()
show() hide()
fadeIn() fadeOut()
fadeTo()
slideDown() slideUp()
 
 
JQ里的js代码意思
// 源码分析 jquery-2.0.3.js
  
  // 21 - 94 定义了一些变量和函数 jQuery = $ 
  // 96 - 283 给jQ对象添加一些属性和方法
  // 285 - 347 extend jQ的继承方法
  // 349 - 817 jQuery.extend():扩展一些工具方法// $().css() 和 $.trim();静态方法,jQ和js都能用
  // 877 - 2879 Sizzle 复杂选择器的实现
  // 2880 - 3064 Callbacks:回调对象
  // 3065 - 3205 延迟对象:异步管理
  // 3206 - 3321 support 功能检测
  // 3333 - 3677 data() 数据缓存
  // 3678 - 3822 queue 队列
  // 3828 - 4324 attr() prop() addClass()等属性操作
  // 4329 - 5159 事件管理
  // 5160 - 6091 DOM操作
  // 6092 - 6661 css()方法 样式操作
  // 6662 - 7909 提交的数据和ajax操作
  // 7910 - 8651 animate()
  // 8652 - 8877 offset() 位置与尺寸
  // 8878 - 8905 jQ模块化的模式
  
  // 8907 window.jQuery = window.$ = jQuery;
 
 
字符串相关的函数：
str.charAt(i);
str.search("a");
 
JQ慕课网：
选择器：
技术分享
技术分享
 
JQ相关样式
 
attr()有4个表达式
 
attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
 
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
 
优点：
 
attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
 
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
 
.html()方法 //获取所有的，如果改变该值，里面的所有都改变为该值，包括标签都会没有
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
注意事项：
.htm()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
 
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
注意事项：
 
.text()结果返回一个字符串，包含所有匹配元素的合并文本
.html与.text的异同:
 
.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
 
//通过.text()的回调，获取原本的内容，修改，在重新赋值
        $(".left a:first").text(function(idnex,text){
            return ‘增加新的文本内容‘ + text
        })
.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
.val()方法
.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数
 
.toggleClass()
toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass
 
 
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
 
 
prepend()与prependTo()
.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数
而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。
 
 
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中
after()与before()
before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码
 
 
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除
 
 
DOM替换replaceWith()和replaceAll()
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

js_JQ


联系
我们