jQuery基础入门 入口函数 选择器

一、一个入门小程序

说明一下这里我用的是Hbuild工具

首先引入jQuery的包 写一个入口函数

文本中的连续的 . 调出属性，这个特性叫做链式编程

二、jQuery入口函数

三、jQuery入口函数与原生JavaScript入口函数的对比

jQuery入口函数与window.onload作为入口函数的对比：

jQuery的入口函数要快于JavaScript的入口函数

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

jQuery的入口函数只会等待dom文档树加载完成就开始执行，并不会等待图片、文件的加载。

四、jQuery对象与dom对象的相互转换

Dom对象与jQuery对象的相互转换：

DOM对象转换成jQuery对象：用钱传

var $obj = $(domObj);// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $("li");//第一种方法（推荐使用）$li[0]//第二种方法$li.get(0)

五、小例子：开关灯

六、基本选择器

基本选择器：
名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素

七、一个小例子：基本选择器

八、层级选择器

名称 用法 描述
子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

九、过滤选择器

名称 用法 描述
:eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的 元素，索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素

十、筛选选择器(方法)

名称 用法 描述
children(selector) $(“ul”).children(“li”)相当于$(“ul>li”)，子类选择器
find(selector) $(“ul”).find(“li”);相当于$(“ul li”),后代选择器
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2);相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟

十一、写一个下拉菜单

mouseover事件在鼠标移动到选取元素及其子元素上时触发
mouseenter事件只在鼠标移动到选取的元素上时触发

具体可查看

EasyUI 基础面板(Basic Panel)_easyui demo

十二、获取页面用户输入的用户名及密码