jQuery学习笔记（一）样式篇1

logo-jquery-20191111489

前言

jQuery是一个JavaScript代码库（或者JavaScript框架）。jQuery的宗旨是“Write Less，Do more”（写更少的代码，做更多的事情）。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery学习之样式篇

选择器

选择器	描述
$("parent > child")	子选择器：选择所有指定的“parent”元素中指定的“child”的直接子元素，相邻上下级关系
$("ancestor descendant")	后代选择器：选择给定的祖先元素的所有后代元素，包含这个元素的直接子元素或者、孙子、曾孙等
$("prev + next")	相邻兄弟选择器：选择紧跟在“prev”元素后的“next”元素
$("prev ~ siblings")	一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素。一般兄弟指具有相同的父元素，并匹配过滤“siblings”选择器
$(":first")	匹配第一个元素，如$("input:first")找到的是第一个input
$(":last")	匹配最后一个元素
$(":not(selector)")	选择所有不是给定选择器的元素
$(":eq(index)")	选择索引值为index的元素
$(":gt(index)")	选择所有索引值大于index的元素
$(":lt(index)")	选择所有索引值小于index的元素
$(":even")	索引值为偶数的元素，从零开始
$(":odd")	索引值为奇数的元素，从零开始
$(":header")	选择所有标题元素，如h1，h2等
$(":lang(language)")	选择指定语言的元素
$(":root")	选择该文档的根元素
$(":animated")	所有正在执行动画效果的元素
$(":contains(text)")	所有包含指定文本的元素，如果匹配的文本包含在其子元素中，同样匹配
$(":has(selector)")	所有元素中至少包含指定选择器的元素
$(":parent")	所有包含子元素或者文本的元素
$(":empty")	所有没有子元素的元素

选择器	描述
$(":visible")	选择所有显示的元素
$(":hidden")	选择所有隐藏的元素

属性选择器 `$("input[name~-'objname']")`

$("[attribute|-'value']")选择指定属性值等于给定字符串或以该文字串为前缀（该字符串后跟一个连字符"-"）的元素

选择器	描述
$("[attribute*='value']")	选择指定属性包含给定的子字符串的元素
$("[attribute~-'value']")	选择指定属性用空格分割的值中包含一个给定值的元素
$("[attribute='value']")	选择指定属性是给定值的元素
$("[attribute!='value']")	选择指定属性不等于给定值的元素
$("[attribute^='value']")	选择指定属性是以给定字符串开始的元素
-'value']")	选择指定属性是以给定字符串结尾的元素
$("[attribute]")	选择所有具有指定属性的元素
$("[attributeFilter1][attributeFilterN]")	选择匹配所有指定的属性筛选器的元素

表单元素选择器

选择器	描述
$(":input")	选择所有input，textarea，select和button元素
$(":text")	所有文本框
$(":password")	所有密码框
$(":radio")	所有单选按钮
$(":checkbox")	所有复选框
$(":submit")	所有提交按钮
$(":image")	所有图像域
$(":reset")	所有重置按钮
$(":button")	所有按钮
$(":file")	所有文件域

表单对象属性筛选选择器

选择器	描述
$(":enabled")	匹配可用的表单元素
$(":disabled")	匹配不可用的表单元素
$(":checked")	匹配被选中的元素
$(":selected")	匹配被选中的元素

jQuery选择器之特殊选择器this

this和$(this) 的区别？答：this 是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的拥有者； eg:

 
  
  var ilucifer = { 
  name:"寒江", 
  getName:funcion(){ 
  //this,就是imooc对象 
  return this.name; 
  } 
  } 
  ilucifer .getName();//寒江

在JavaScript中this是动态的，即这个上下文对象都是可以被动态改变的(可以通过call,apply等方法) 同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象。

结尾

本文整理自慕课网jQuery基础 (一)—样式篇，课程链接：https://www.imooc.com/learn/418；作者：Aaron艾伦https://www.imooc.com/u/290139/courses?sort=publish 谢谢

欢迎关注微信公众号weyoung，记录学习笔记和一些有趣的东西，欢迎交流~~

个人微信公众号weyoung

更多联系方式

平台	链接
个人博客	https://www.wanglixia.top/
预览项目：	https://nelucifer.gitee.io/
个人微信公众号：	weyoung
segmentfault:	https://segmentfault.com/u/nelucifer
CSDN:	https://me.csdn.net/wlx001
：	https://www.jianshu.com/u/99211cc23788
掘金：	https://juejin.im/user/59b08c575188250f4850e80e