jQuery的内容选择器和属性

jQuery的选择器

jQuery的内容选择器

:empty :parent :contains(text) :has(selector)

$(function () {//:empty 作用是找内容为空的  既没有文本又没有子元素的指定元素var $div = $('div:empty');console.log($div);//:parent  作用是找有内容  有文本或有子元素的指定元素var $div1 = $('div:parent');console.log($div1);//:contains(text)  作用是找有内容并且内容包含括号中传入的字符串的内容var $div2 = $('div:contains("i am div")');console.log($div2);//:has(selector) 作用是找有子元素并且子元素是括号中传入的指定子元素var $div3 = $('div:has("span")');console.log($div2);})

jQuery的属性

对象里边保存的变量就是属性

对象.属性名称 = 值赋值

对象[‘属性名称’] = 值赋值

对象.属性名称获得值

对象[‘属性名称’] 获得值

jQuery的属性和属性节点

任何对象都有属性但只有dom对象有属性节点

属性节点就是html标签中的属性（比如id name class都是）

dom元素.setAttribute(‘属性名称’，‘值’); 赋值

dom元素.getAttribute(‘属性名称’); 获得值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="../jQuery/jquery-1.12.4.js"></script><!-- 引入jQuery库 -->
<script>$(function () {function Person(){}var p = new Person();//对象p.name = 'inj';//属性   第一种赋值console.log(p.name);p['name'] = 'chen';console.log(p.name); //第二种赋值var span = document.getElementsByTagName('span')[0];//span.setAttribute('name','inj');//设置属性节点span.getAttribute('name');//获取属性节点})
</script>
<body><span name = 'xs'></span><!-- 在html标签中添加的属性(比如上面的name)就是属性节点 --><!-- 在浏览器中找到span的dom元素后，dom中的都是span对象的属性 --><!-- span对象的属性中有的attributes属性，他的内容都是属性节点 -->
</body>
</html>

jQuery中的attr方法

attr是用于获得或者设置属性节点的值

传一个参数时，代表获取属性节点的值

传两个参数时，代表设置属性节点的值

removeAttr是用于删除属性节点

传入的参数为字符串的属性节点它会找到这个属性节点并将有该属性节点的元素直接删除

在字符串中用空格隔开可以指定多个属性节点

<script>$(function(){$('span').attr('class');//获取dom元素span并且用attr获得他的属性节点名为class的值//注意：这里我写了两个span但是他只会返回第一个指定元素的获取到的属性节点值$('span').attr('class','box');//获取dom元素span并且用attr修改他的属性节点名为class的值为box//注意：如果是要用attr设置的话找到多少指定元素就修改多少个属性节点的值，而且在为设置时没有指定的属性节点 系统会在每一个指定元素新增该属性节点$('span').removeAttr('class');$('span').removeAttr('class name');});
</script>
<body><span class="span1" name = 'it666'></span><span class="span2" name = 'inj'></span>
</body>

jQuery中的prop方法

prop特点跟attr一样

removeProp特点跟removeAttr一样

在属性节点返回的是布尔值的时候就用prop 其他的用attr

<script>$(function(){//prop特点跟attr一样$('span').eq(0).prop('demo','it666');//eq(0)就是找到的所有span元素中的第一个$('span').eq(11).prop('demo','inj');$('span').prop('demo');//removeProp特点跟removeAttr一样$('span').removeProp('demo');//注意点：prop不仅可以操作属性，还可以操作属性节点$('span').prop('class');$('input').prop('checked');  //返回布尔值$('input').attr('checked');  //返回就是字符串 普通的值//所有对于这个来说prop要好于attr 因为返回布尔值会更加直观  判断起来也比较简单//在属性节点返回的是布尔值的时候就用prop  其他的用attr})
</script>
<body><span class="span1" name = 'it666'></span><span class="span2" name = 'inj'></span><input type="checkbox" checked>
</body>

jQuery的操作类的相关方法

<script>$(function () {var btns = document.getElementsByTagName('button');btns[0].onclick = function(){$('div').addClass('class1 class2');//作用添加一个类  传入的为字符串 添加多个类 就在字符串内用空格隔开}btns[1].onclick = function(){$('div').removeClass('class2');//作用删除一个类 传入的为字符串 删除多个类 就在字符串内用空格隔开}btns[2].onclick = function(){$('div').toggleClass('class2');//作用切换类 传入的为字符串 dom节点存在传入的内容的类就删除 没有就添加}})
</script>
<body><button>添加类</button><button>删除类</button><button>切换类</button><div></div>
</body>

jQuery操作文本值

<script>$(function () {var btns = document.getElementsByTagName('button');btns[0].onclick = function(){$('div').html('<p>i am p<span>i am span</span></p>');//html方法和原生js的innerHTML作用一样   传入参数为字符串 就是设置添加代码片段 }btns[1].onclick = function(){console.log($('div').html());//无参数 就是获取指定dom节点的后代元素}btns[2].onclick = function(){$('div').text('<p>i am p<span>i am span</span></p>');//text和原生js的innerText一样   传入参数为字符串 就是设置指定元素的内容}btns[3].onclick = function(){console.log($('div').text());//无参数 就是获取指定dom节点的内容}btns[4].onclick = function(){$('input').val('xxxxxxx');//大体同上 只不过功能是设置input的value内容}btns[5].onclick = function(){console.log($('input').val());//无参数 就是获取指定input的内容}})
</script>
<body><button>设置html</button><button>获取html</button><button>设置text</button><button>获取text</button><button>设置value</button><button>获取value</button><div></div><input type="text" name="" id="">
</body>

jQuery的内容选择器和属性相关推荐

jQuery学习- 内容选择器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>内容选 ...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、
jQuery和源生DOM的转化案例 <body> <p id="test">123</p> <p>456</p> &l ...
jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
jquery获取java对象的属性_jQuery - 获得内容和属性
jQuery - 获得内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供 ...
jQuery - 获取内容和属性
http://www.runoob.com/jquery/jquery-dom-get.html jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法. jQue ...
jquery内容选择器
1.jquery内容选择器 1.1.:contains(text)内容选择器解释:选择含有文本内容text的元素举例:$("div:contains('第一天')") 选择内容 ...