jQuery的介绍

JavaScript库：是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是这个库中，封装好了很多预先定义好的函数在里面。

JQuery的入门

JQuery常见的两种入口函数

$(function(){

})

$(document).ready(function(){

})

总结：

1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生5中的DOMContentLoaded.
3.不同于原生j5 中的load事件是等页面文档、外部的j5文件、css文件，图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。
3.4.jQuery中的顶级对象$
1.5是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用＄，
2.$是jQuery的顶级对象，相当于原生JavaScript中的window.把元素利用$包装成jQuery对象就可以调用jQuery的方法。
3.5.jQuery 对象和 DOM 对象

JQuery选择器
原生I5获取元监方式很多、很杂，而且兼容性情况不一致，因此jQuery 给我们做了封装，使获取元素统-标准

2.1.基础选择器

名称	用法	描述
ID选择器	$("#id”)	获取指定ID的元素
全选选择器	*$(')**	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div”)	获取同一类标签的所有元素
并集选择器	$("div,p,Ii")	选取多个元素
交集选择器	$("li.current")	交集元素

2.2层级选择器
层级选择器最常用的两个分别为；后代选择器和子代选择器。

名称	用法	描述
子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元票
后代选择器	$("ul li")	使用空格，代表后代选择器，获取u/下的所有11元素，包括孙子等滥例代码

2.4 过滤选择器
韩选选择器顾名思义就是在所有的选项中选择满定条件的进行算选选择。常见如下

语法	用法	描述
:first	$("li:frist")	获取第一个li元素
:last	$("li:last")	获取最后一个元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择素引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到li元素中，选择索引导为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引每为偶数的元素

2.5表单过滤选择器

在表单元素中，针对不同的表单元素状态jQuery提供的表单过滤选择器

名称	用法	描述
可用元素选择器	：enabled	获取可用元素
不可用元素选择器	：disabled	获取可用元素
选中选择器	：checked	获得单选/复选框中的元素
选中选择器	：selected	获取下拉列表框中的元素

<script src="js/jquery.min.js"></script><script type="text/javascript">$(function(){var a1=$("d1") //获取元素console.log(a1)console.log(a1.text());//使用jq对象的方法获取元素的文本内容console.log(a1[0].innerText)//jq对象转换为DOM对象，获取文本内容console.log("--------------")var d1=document.getElementById("d1")//根据ID获取元素console.log(d1.innerText)//使用dom对象获取元素文本内容console.log($(d1).text()) //把dom对象转换为jq对象，获取文本内容var a2=$("p")   //获取标签内容console.log(a2.text())    //使用jq对象的方法获取元素的文本内容 var p1=document.getElementsByTagName("p")console.log($(p1).text())})</script></head><body><div id="d1">id为d1的div</div><p>这是一个p标签</p></body>

<style type="text/css">#context{width: 200px;height: 200px;background-color: aqua;}</style><body><script src="js/jquery.min.js"></script><script type="text/javascript">$(function(){//.点击哪一项，让当前项变成红色，其他变成蓝色$("ul>li").click(function(){$(this).css("color","red")$(this).siblings().css("color","blue")})//变宽$("#towidth").click(function(){$("#context").css("width","500px")})//变高$("#toheight").click(function(){$("#context").css("height","500px")})//隐藏$("#tohide").click(function(){$("#context").fadeOut(2000);})//显示$("#toshow").click(function(){$("#context").fadeIn(2000);})//切换                                                                                                                    $("#totiggle").click(function(){$("#context").fadeToggle(2000)})})</script></body><ul><li>苹果</li><li>香蕉</li><li>橙子</li><li>葡萄</li><li>西瓜</li><li>柚子</li></ul><hr /><button id="towidth">变宽</button><button id="toheight">变高</button><button id="tohide">隐藏</button><button id="toshow">显示</button><button id="totiggle">切换</button><div id="context"></div>

<style>#context{width: 310px;height: 260px;margin: 200px auto;overflow:hidden; }#left{width: 90px;/* border: 1px blue solid; */float: left;}#left{margin-top: 0px;}#right{width: 215px;/* border: 1px red solid; */float: right;}#left ul li a{display: inline-block;width: 95px;   /* 行内元素不能设置宽高 */height: 28px;font-family: "行楷";font-size: 13px;font-weight: bold;text-align: center; /*左右居中 */line-height: 25px;   /* 上下居中 */background-color: peachpuff;/* border: 1px red solid; */}#left ul li a:hover{background-color: azure;}*{margin: 0px;padding: 0px;}ul li{list-style: none;}a{text-decoration: none;}</style></head><body><script src="js/jquery.min.js"></script><script>$(function(){$("#left>ul>li").mouseover(function(){//1.拿到当前鼠标放入列表项的索引var index=$(this).index();//根据索引找到右侧匹配的项进行显示，其他隐藏$("#right>ul>li:eq("+index+")").fadeIn().siblings().hide();})})</script><div id="context"><div id="left"><ul><li><a href="#">女靴</a></li><li><a href="#">雪地靴</a></li><li><a href="#">冬裙</a></li><li><a href="#">呢大衣</a></li><li><a href="#">毛衣</a></li><li><a href="#">棉服</a></li><li><a href="#">女裤</a></li><li><a href="#">羽绒服</a></li><li><a href="#">牛仔裤</a></li></ul></div><div id="right"><ul><li><img src="img/女靴.jpg"></li><li><img src="img/雪地靴.jpg"></li><li><img src="img/冬裙.jpg"></li><li><img src="img/呢大衣.jpg"></li><li><img src="img/毛衣.jpg"></li><li><img src="img/棉服.jpg"></li><li><img src="img/女裤.jpg"></li><li><img src="img/羽绒服.jpg"></li><li><img src="img/牛仔裤.jpg"></li></ul></div></div></body>

JQuery的课后笔记相关推荐

jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
jQuery插件开发学习笔记
今天想了解一下jQuery的插件开发,于是google了一下,列在前面的两篇文章都很不错,jQuery插件开发全解析更是将插件开发的方方面面细致入微的进行了讲解,并提供了PDF进行下载.笔者今天详细 ...
jquery mobile开发笔记之Ajax提交数据
这两天学习了下,jquery mobile(以下简称jqm)的开发相关的内容.可能之前有过web的开发基础,相对于我来说学习这个东西感觉挺简单的,很容易上手.Jqm的的语法和jquery其实是一样的, ...
jQuery WeUI学习笔记1
前言:内容基本是参考博客笔记,偶尔会加些个人补充,仅作为复习巩固用途.如有错误,请指出,谢谢. 提示:后续更深理解在补充前序.使用过程出现的问题注意:发现问题解决问题比学习新知识更重要一.jQu ...
MySQL8数据库原理与应用(微课版)课后笔记-实训7
最近学习笔记记录,仅供学习参考在完成课后实训7前所需的建表语句如下: CREATE TABLE bmdmb (bmh varchar(10) NOT NULL COMMENT '部门号',bmmc ...
jQuery 实战读书笔记之第四章：使用特性、属性和数据
使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象属性指的 ...
学习jquery的一些笔记
display:block 显示 display:none 不显示 addClass 添加Class removeClass 去除Class toggleClass 来回变换Class,一般配合c ...
jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

JQuery的课后笔记

jQuery的介绍

JQuery的入门

2.1.基础选择器

JQuery的课后笔记相关推荐

最新文章

热门文章