黑马程序员技术交流社区

标题: 【石家庄校区】就业班day_05_JS [打印本页]

作者: 时光。    时间: 2018-5-3 15:36
标题: 【石家庄校区】就业班day_05_JS
就业班day_05_JS
JQuery的概述
JQuery是JS的框架
JS 常用的框架:
JQuery  ,  ExtJS   ,  DWR  ,  Prototype...
引入Jquery的js文件 :
<script src="../../js/jquery-1.11.3.min.js"></script>
JQuery 的入口函数:
传统的JS方式页面加载只执行一次,JQuery可以执行多次,效率比window.onload高
JS对象和JQ对象的转换
window.onload = function(){
​                                // 传统JS方式:
​                                var d1 = document.getElementById("d1");
​                                // JS对象的属性和方法:
​                                // d1.innerHTML = "JS对象的属性";
​                                // d1.html("aaaaaa");
​                                // 将JS对象转成JQ的对象.
​                                $(d1).html("JS对象转成JQ对象");
​                        }
​             $(function(){
​                                var ("#d1");
​                                // $d1.html("JQ对象的属性");
​                                // 转成JS的对象:
​                                // 一种方式
​                                // $d1[0].innerHTML = "将JQ的对象转成JS对象";
​                                // 二种方式:
​                                $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
JQ 的效果操作
slideDown();          向下滑动
slideUp();  向上滑动
fadeIn();          淡入
fadeOut();  淡出
animate();  自定义动画
\toggle();   单击切换函数
JQ的基本选择器
id选择器
用法:$(“#id”)
类选择器
用法:$(“.类名”)
元素选择器
用法:$(“元素名称”)
通配符选择器
用法:$(“*”)
并列选择器
用法:$(“选择器,选择器,选择器”)
层级选择器
后代选择器:使用空格        所有后代包含孙子及以下的元素
子元素选择器:使用>        第一层的元素(儿子)
下一个元素:使用+                下一个同辈元素
兄弟元素:使用~                后面所有的同辈元素






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2