Jquery教程 1.jquery的基础选择器

看这篇文章时,建议有一定的HTML,CSS,javascript基础

jQuery是一个兼容多浏览器的,轻量级的javascript库,我们做前段开发时可以用jquery做到以下几点:

1.找到HTML中的元素

2.改变HTML的内容

3.根据用户的反馈,比如按下按钮页面做出相应的动作

4.使用动画效果和网络交互

5.不刷新页面而改变页面的内容

首先理解什么是DOM,它是Document Object Model的缩写,简单来说,就是浏览器加载HTML时生成的树状结构。如下图:

浏览器在加载DOM时如下图:浏览器第一步加载HTML到DOM,但是有时候,javascript有时候会在DOM加载完之前就运行了,然而这时候DOM是没有加载完的所以,要让DOM加载完毕再执行js代码,就需要:

$(document).ready(function(){

代码块。。。

});

#id选择器

格式:$("#id")

例子:

element选择器

格式:$("element")

例子:


.class选择器

格式:$(".class")

例子:


.*选择器

格式:$("*")  注意:由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。

例子:

sele1,sele2,sele3选择器:每个之间用逗号隔开,哪种类型都可以如$("#id,.class,myname")

格式:$("sele1,sele2,sele3")

例子:

ance desc选择器:ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。

格式:$("ance desc")

例子:

横线的代码表示 div下的所有label元素,但选不到<p>里面的label元素

$("div label")//获取的是div下的所有label元素,包括子辈和孙辈

parent>child选择器

格式:$("parent>child")

例子:

$("div>label")//获取的是div下的所有子辈元素,不包括孙辈

prev+next选择器 “prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

格式:$("prev+next")

例子:


prev~next选择器

格式:$("prev~next")

例子:

总结

1.$("div span")获取div下的所有span子元素

2.$("div>span")获取div下的所有直接子元素,没有孙子辈

3.$("div+span")获取div相邻的span元素

4.$("div~span")获取div相邻的所有span元素

时间: 2024-10-25 20:29:54

Jquery教程 1.jquery的基础选择器的相关文章

Jquery教程 2.jquery的过滤性选择器

:first过滤器:$("li:last").css("background-color", "red") 得到li元素的最后一个子节点. $("li:last")<==>$("li").last(); 注:这两个的效果相同,但是后者速度更快,推荐用后者 $("li:first")<==>$("li").first(); $("li&

jQuery 教程

jQuery 教程简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应

jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

jquery学习笔记-jQuery操纵DOM元素属性 attr()和removeAtrr()方法

jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: <!DOCTYPE html> <html>

jquery学习笔记-jQuery实现单击和鼠标感应事件

对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用. 例子:点击事件的动态交互. <script type="text/javascript"> $(function() { $("#ddd").toggle( function(oEvent) { $(oEvent.target).css("opacity", "0.5")

jquery特效-基于jQuery仿淘宝红色分类导航

今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div id="nav"> <div class="area clearfix"> <div class="separate"> </div> <div class="

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el

JQuery————基础&amp;&amp;基础选择器

环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库.在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版. 引入jQuery文件库 下载完jQuery框架文件后,并不需要任何的安装,仅需要使用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?