JQuery文档分析1-JQuery核心与选择器

最新学习DWZ框架 ,最后发现有必要先学习下JQuery。JQuery,发现跟着视频学习无法完全更好的理解,没办法只能自己看文档学习,毕竟官方的文档才是王道。我下载的文档时JQuery1.7 ,幸好有中文版

JQuery是对javascript 的一个封装,目的是在用更少的代码开发出更强的交互性web ,

其实所谓的JQuery库也只是一个js文件而已,可以去官方下载到。。

在自己的web中使用jQuery只需要增加

1、jQuery介绍

JQuery的核心是jQuery这个函数,在JQuery库中他可以用$ 这样一个美元符号来代替。他是实现一切JQuery的基础。

我们知道我们在利用HTML DOM编写页面的时候我们经常会利用 document.getElementByID(id) 来获取html dom树中的节点元素对应的dom对象,

这个jQuery()和$()的作用和html dom中的操作类似,都是为了获取到元素,只不过前者是为了获取到元素所对应的 dom对象,这个对象只有一个。

而jQuery的功能更强大.他可以获取html dom树中的一个或者一组节点对应的 jQuery对象。然后我们通过jQuery对象的内置方法可以实现对象这些元素的操作例如:显示、隐藏、设置css等等操作.实现更强操作。

2、如何使用JQuery . 在哪里使用？

因为jQuery是基于javascript的所以可以再 <script></script>标签对内部使用。但是在使用前,我们要考虑这一点,我们知道在web应用中

在加载页面时候总是会有延迟,所以有些元素可能没有被初始化.因此什么时候调用jQuery代码就很关键.

这里有一个约定,就是所有的jQuery代码必须在当前html文档就绪的情况下执行, 所以jQuery中我们就必须将代码放到如下中

其实在javascript内部可能是在文档的onLoad中处理的。我们只要记住在使用jQuery的时候吧我们的jQuery代码放到一下三个函数

的其中一个之中即可,他们表示当文档完全下载到本地后在开始执行jQuery代码

方式1

$(document).ready(function(){

code....

}) ;

方式2

$().ready(function(){

code....

}) ;

方式3

$(function(){

code....

});

3、如何选择出我们要操作的 html元素,也就是 html中的标签对?选择之后如何操作？

$(document) 表示选择出文档对应的jQuery对象,比如上面的$(document).ready(注册函数) 只是我们调用了这个对象的方法而已

$("p") 如果html中有p标签那么表示选择出所有的<p></p>那么针对这个jQuery对象的操作将会影响到页面的全部p标签、

比如 $(function(){ $("p").hide(); //将会隐藏所有p标签}) ;

$(".classname") $("#id") $("div#id") $("div.classname") $("div.class p") 所有针对css的选择器都可以针对jQuery来使用。

$(myForm.elements) .hide() 假如myForm是一个表单name属性那么将隐藏所有表单内部的元素

$("div > p") 获取位于div中的所有p标签

$("br,#a,.classname") 将多个选择器的结果合并到一起 ,分割

$("<div><p></p></div>") .appendTo("p"); 创建<div><p></p></div> 并且添加到p标签中

$(document.body) 这个body是document的内置对象,目的是获取文档中body对应的jQuery对象

$("div", xml.responseXML);  这是在ajax返回的xml格式的文档中查找div标记对应的jQuery对象

$("input:radio", document.forms[0]);  //在文档的第一个表单中查找所有radio类型的表单元素

$("*")  找到所有元素

$("label + input")  找到所有跟在lable后面的input元素

$("form ~ input") 找到和form在 input在同一个父亲标签下的所有input元素

$("li:first");    取出<ul><li></li><li></li></ul>取出当前文档中的第一个li元素

$("li:first");    取出<ul><li></li><li></li></ul>取出当前文档中的最后一个li元素

$("input:checked") 找出input中所有checked的元素

$("input:not(:checked)")找出input中所有的未checked的元素

$("select option:selected") 找出select中所有被选中的元素

$("input:hidden")  找出input中所有不可看见元素

$("input:hidden")  找出form中所有button

$("td:parent")  查找出td的所有父元素

$("tr:visible")  找出所有可见元素tr

$("td:empty") 找出所有td为空的元素

$("ul li:first-child")  查找所有 ul中的 第一个li

$("ul li:last-child")   查找所有 ul中的 最后一个li

$("ul li:only-child") 只查找UL中唯一元素 li

下面主要应用于表单中元素的查找

$(":text")

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":image")

$(":reset")

$(":button")

$(":file")

$("input:hidden")  表示input元素中type为hidden的元素

$("input:disabled") 找出input中无效的元素  如果文本框

$("input:checked")  查找input中所有选择的元素 如 checkbox

$("select option:selected") 找出 select 中的option中属性selected=true的元素 //....

到此jQuery的选择器就分析完了

$("form input")   找出表单中的所有元素

$("table td") 找出表格中的所有列

JQuery文档分析1-JQuery核心与选择器相关推荐

jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
.jQuery文档分析4-文档处理
文档处理就是在dom元素中添加html内容 1. $("p").append("<a href='www.baidu.com'>baidu</a> ...
jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例使 ...
jquery文档加载完毕后执行的几种写法
2019独角兽企业重金招聘Python工程师标准>>> 1.js文档加载完毕标签内 οnlοad="test()" window.οnlοad=function ...
JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录一.筛选器补充二.jQuery属性操作三.jQuery文档处理一.筛选器补充 1.过滤筛选器就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
Scrapy笔记（2）——使用正则表达式提取jQuery文档内容
任务:提取如下网页中Data中内容: jQuery1123006065544693397551_1623470103055({"Message":"",&quo ...
OCaml文档（一） - 核心语言部分
这学期的算法,编译这些不限语言的课,我基本都用了ocaml自己写(这样就不会被同学要代码了) 之前我在JavaScript写函数式,总觉着怪怪的,直到我找到了OCaml 虽然这个语言和我一样大,但是普 ...
当NLP遇见OCR：如何提升智能文档分析效果？
随着数智化时代的到来,各行各业已经步入智能化升级的关键阶段,传统行业智能化进程已然加速.百度大脑赋能企业服务升级,为企业提供更加智慧化.人性化的服务,让企业服务更聪明.更高效. 百度大脑 AI 开放平 ...
腾讯数平团队荣获第15届国际文档分析与识别竞赛七项冠军
导语:在刚刚结束的第15届国际文档分析与识别大会(澳大利亚悉尼)上,腾讯数据平台部(下称"数平")团队获颁7项冠军证书,并受邀在会议上做技术分享. 9.20 - 9.25,作为全球 ...
C#宿舍管理系统数据表文档分析含释义
视频课:https://edu.csdn.net/course/detail/27107 C#宿舍管理系统数据表文档分析含释义宿舍管理系统字段名类型可否为空简介

JQuery文档分析1-JQuery核心与选择器

JQuery文档分析1-JQuery核心与选择器相关推荐

最新文章

热门文章