js选择器汇总

JavaScript010

js选择器汇总,第1张

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下:

$(...).事件名(function() { })

属性样式有:

$(...).css("border","1px solid red")

$(...).css({...})

$(...).css("border")

$(...).attr(属性名,值)

$(...).html() innerHTML

$(...).text() innerText

$(...).val() value值

$(...).addClass() 增加

$(...).removeClass() 移除

$(...).toggleClass() 开关

简单理解为一些不起眼但是超常用的方法,通过指定的规则作为参数来获取对象的方法;如

ID选择器:通过元素的id来获取对象的 js写法:document.getElementById

标签选择器:通过元素的标签名获取对象:js写法:document.getElementsByTagName

属性选择器: 通过元素的属性获取对象:js写法:document.getElementsByName(通过name属性)

jQuery对象是通过jQuery包装DOM对象后产生的对象

注意:jQuery对象只能使用jQuery里的方法,DOM对象只能使用DOM对象的方法

基本选择器

层级选择器:

基本筛选器:

属性选择器:

表单筛选器:

筛选器方法:

jQuery的一些方法:

注意:对于标签上有的能够看到的属性和自定义属性用attr()方法

对于返回布尔值比如checkbox,radion,option这三个标签是否被选中,用prop方法

事件绑定方式:

注意:DOM定义的事件可以用 .on()方法来绑定事件,但是jQuery定义的事件就不可以

常用事件有:

移除事件:把on改成off,就是移除 .on()绑定的事件

阻止后续事件执行:事件函数中添加 return false(常用于阻止表单提交等)或者e.preventDefault()

阻止事件冒泡:添加e.stopPropagation()

利用父标签去捕获子标签的事件

推荐阅读:

前端开发框架之jQuery 和 Vue 的选择

前端开发之15个jQuery小技巧分享

前端开发之JQuery入门基础操作

前端开发框架jQuery的优势与基础知识分享