文档章节

jQuery小记总结

l
 laughing哥
发布于 2017/09/05 20:51
字数 750
阅读 3
收藏 0

学前端也有一段时间了,都说搞IT的最好能写博客,我理解的意思是权当自己学习记录了,当笔记用。

jQuery总结点代码,都是最基础的,但是为了记录还是写出来加深理解吧

  • jQuery对象转化成DOM对象:

    var $div = $('div') //jQuery对象
    var div = $div.get(0) //通过get方法,转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性
    var i=$(div);//定义一个变量i,因为jQuery是一个数组对象,所以i是一个数组
    var x=i[0];//定义变量x,为i数组的第一个元素
    x.style.color("red");//将z的颜色设置为红色

        经过自己理解,改变变量名后其实就是下面的代码,其实在jQuery变量前加$符号是有必要的,以便与其他变量区分。

  • DOM对象转化成jQuery对象

    var div = document.getElementsByTagName('div'); //dom对象
    var $div = $(div); //jQuery对象
    var $first = $div.first(); //找到第一个div元素
    $first.css('color', 'red'); //给第一个元素设置颜色
    var i=document.getByTagName("div");//定义i为dom对象
    var z=$(i);//定义z为jQuery对象
    var x=z.first();//找到第一个div元素
    x.css("color","red");//给第一个元素设置颜色

        后面又继续学习选择器,比如$('#id');$('.class');$('p');$('*');,分别是id选择器,类选择器,p(元素)选择器和全选择器,对应JS中的代码是

  • 层级选择器

其他选择器都比较好理解,将层级选择器单独拿出来,层级选择器又包括下列几种选择器

子选择器 后代选择器 兄弟选择器 相邻选择器

$('div > p')//div下的第一个P元素
$('div p')//div下的所有P元素
$(".prev + div")//.prev 选择器所在元素紧跟着的元素,必须和实际元素(此处指div)相符
$(".prev ~ div")//.prev 选择器所在元素后面的所有div元素
  • 内容筛选选择器

 

$('.div:contains("12345")').css("color", "#A0A0A0");
//选择包含指定文本(此处指12345,如果一个元素中文本为1234567,也会被选定,但是文本为123不行)的元素,设置颜色
$('.div:has(span)').css("color", "blue");
//选择包含指定选择器(此处指span)的元素
$('a:12345').css("border", "3px groove blue");
//选择所有包含子元素或者文本(此处指12345,如果一个元素中文本为1234567,或者123也会被选定,)的a元素
$('a:empty').text("empty").css("border", "3px groove red"); 
//找到a元素下面的所有空节点(没有子元素),并赋值为empty

注释有点多,是通过自己实践之后的一些理解总结出来的

 

两个script中的变量可以相互比较吗,这两个script中的变量是局部变量还是全局变量

一个是elements1一个是elements2,分别在两个script中,这样也可以比较吗?elements1 elements2 是局部变量还是全局变量, 有没有详细讲解?

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: js再学习
下一篇: js再学习
l
粉丝 0
博文 2
码字总数 2323
作品 0
私信 提问
jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下。 一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); 意义为在DOM加载完毕后执行了ready()方法。 二、再看 (functio...

xiahuawuyu
2012/07/16
0
0
jQuery下通过$.browser来判断浏览器

$.browser.['浏览器关键字'] $(function(){if($.browser.msie) { }else if($.browser.safari){ }else if($.browser.mozilla){ }else if($.browser.opera) { }else{ }});看一下jQuery的源码:......

mj4738
2013/06/25
0
0
npm 如何查看一个包的版本信息

https://blog.csdn.net/cvper/article/details/79543262 有了npm 我们能够简单的一段代码就下载我们需要的包,但是包是不断更新的, 所以我们要关注包的版本信息; 现在,假设我们需要 jque...

ahl123
08/11
0
0
jQuery 1.4版本的15个新功能

jQuery 1.4版本的15个新功能 1.jQuery()创建DOM元素:支持传参设置属性 之前,jQuery可以通过 attr 方法设置元素的属性,既可传属性的名和值,也可以是包含几组特定 属性名值对 的 对象。在 ...

Sephiroth
2010/01/28
858
1
Ajax框架 -- jQuery 1.3 发布

1月14日是jQuery的生日,昨天是 jQuery 三周年的生日,为此 jQuery 发布了一个新的重要版本 1.3,同时宣布加入非盈利性组织 Software Freedom Conservancy。 新版本具有以下几个新的特性: ...

红薯
2009/01/15
477
2

没有更多内容

加载失败,请刷新页面

加载更多

pyhanlp用户自定义词典添加实例说明

pyhanlp用户自定义词典添加实例说明 pyhanlp是python版封装的的HanLP,项目地址:https://github.com/hankcs/pyhanlp 经过测试,HanLP比nltk在中文分词和实体识别方面都更好用. 如何向pyhan...

左手的倒影
13分钟前
1
0
TypeError: 'dict_keys' object does not support indexing

在python2.x中,dict.keys()返回一个列表,在python3.x中,dict.keys()返回一个dict_keys对象,比起列表,这个对象的行为更像是set,所以不支持索引的。 解决方案:list(dict.keys())[index...

张欢19933
19分钟前
2
0
【HAVENT原创】单页面站点在 Nginx 下刷新报404 的问题

AngularJS / Vue / React 前端站点如果使用了单页面模式,在开发模式下直接使用 url 路由访问是正常的,但是在 nginx 下面会直接报 404 错误。 解决方式是加入 try_files $uri $uri/ /index....

HAVENT
23分钟前
1
0
聊聊flink的FsCheckpointStreamFactory

序 本文主要研究一下flink的FsCheckpointStreamFactory CheckpointStreamFactory flink-runtime_2.11-1.7.0-sources.jar!/org/apache/flink/runtime/state/CheckpointStreamFactory.java /**......

go4it
24分钟前
1
0
react-native-storage(数据存储)文档介绍

中文doc:仅供参考 import Storage from 'react-native-storage'; import {AsyncStorage} from 'react-native'; var storage = new Storage({ // 最大容量,默认值1000条数据循环存储 ......

凌宇之蓝
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部