1.jQuery
2.1如何使用
引入jquery文件
入口函数
功能实现
2.1.1
2.1.2
jQuery 入口函数与js 入口函数的对比:
·JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
·jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载
2.3.3功能实现
jQuery初体验:
2.5jQuery 对象和 DOM 对象2.5.1什么是jQuery 对象?
jQuery对象就是通过jQuery 包装DOM对象后产生的对象jQuery对象是jQuery独有的。如果一个对象是jQuery 对象，那么它就可以使用jQuery 里的方法。例如:s("#test") .htm1();
javascript意思是指: 获取ID为test的元素内的 html代码其中 htm10是Query 里的方法，这代码等同于用 DOM 大T.document.getElementById(" test ")innerHTML:
虽然iQuery 对象是包装 DOM 对象后产生的，但是Query 无法使用 DOM 对象的任方法，同理 DOM 对象也不能使用Query 里的方法
2.5.2jQuery 对象与 DOM 对象之间的转换DOM 对象转为jQuery 对象:
对于已知的 DOM 对象，只需要用 s 把DOM 对象包装起来，就可以获得一个iQuery 对象了示例代码:
<input type="textname="username" id="username” value="张老师”/>
<script>
// 获取DOM对象
var username = document .getElementByid("username");alert(username .value) ;
// 转为jQuery对象
var Susername = $(username) :alert(Susername.va1O):</script>
转换后就可以使用iQuery 中的方法了
iQuery 对象转为 DOM 对象:
两种转换方式将一个jQuery 对象转换成 DOM 对象: [index] 和 get(index)。
(1)jQuery 对象是一个数组对象，可以通过 [index] 的方法，来得到对应的 DOM 对象。
<input type="textname="username” id="username"” value="张老师”/>
escrint
3.1 什么是jQuery 选择器
Query 选择器是iQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: Query 选择器返回的是 Query 对象.jQuery 选择器有很多，基本兼容了 CSS 到 CSS3 所有的选择器，并且jQuery 还添加了很多更加复杂的选择器。Query 选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
3.2 基本选择器
名称 用法 描述
ID 选择器 $("#id"); 获取指定 ID 的元素
类选择器 $(".class"); 获取同一类 class 的元素
标签选择器 $(“div"); 获取同一类标签的所有元素。
并集选择器 $("div,p,li"); 使用逗号分隔，只要符合条件之一就可。
交集选择器 $("div.redClass"); 获取 class 为 redClass 的 div 元素。
总结: 跟 css 的选择器用法一样，只是外层加 $0。
示例代码如下:
// 使用jquery设置css样式: css(name，value)// name: 样式名; value: 样式值
// id选择器
s("#one").css("background"，"#ffb6b9");
// class选择器s(".two") .css("background"，"#fae3d9"
3.2层次选择器
名称 用法 描述
子代选择器 $(“ul>li'); 使用 >号，获取儿子层级的元素。注意，并不会获取孙子层级的元素
后代选择器 $("ul li"); 使用空格，代表后代选择器，获取 ul 下的所有li 元素，包括孙子元素
跟 css的选择器一模一样。
s(" .myu1 1i") .css ("height""50px") .css("background""#9dd3a8");
s(",myu1>1i") .css ("height"，"30px") .css ("background",
"#d9d9f3");
4 属性选择器
4.1 基本属性选择器
器三三三
名称 用法 描述
[attribute] $(input[checked]).attr('checked',false): 匹配包含给定属性的元素。常用于单选或复选的 checked。
[attribute=value] $(input[name=“username” ).val(); 匹配给定的属性是某个特定值的元素。常用于选择指定的input 标签。
[attribute!=value] $('div[name="box].html(): 匹配给定的属性是不包含某个特定值的元素
[attribute^=valuel $('div[class^="b]).css("background","red"); 匹配给定的属性是以某些值开始的元素。
[attribute*=value] $('div[class*="b"]).css("background""red"); 匹配给定的属性是以包含某些值的元素
示例代码如下:
<body>
<button id="btn1">所有含class的标签</button>
<button id="btn2">所有含class是box1的标签</button>
<button id="btn3">所有class不是box1的标签</button>
<button id="btn4">所有cass以b开始的标签</button>
<button id="btn5">所有class包含o的标签</button><br />
<div>div标签</div>
<div class="box1">box1</div>
<div class="box1">boxl</div>
<div class="box2">box2</div>
扫一扫
3538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
