jQuery 对象转换与选择器

目录

1.js与jQuery对象之间转换

2.jQuery选择器

2.1 基本选择器

2.2层级选择器

2.3 基本过滤选择器

---

1.js与jQuery对象之间转换

==js的DOM对象转换成jQuery对象==，语法：$(js的DOM对象)

var jsDomEle = document.getElementById("myDiv"); //js的DOM对象
var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象

==jQuery对象转换成js对象==，语法：jquery对象[索引] 或 jquery对象.get(索引)

var $jQueryEle = $("#myDiv"); //jQuery对象
var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象

        $(function(){

        var dive = document.getElementById("myD");
        alert(dive.innerHTML);

        var $dive = $("#myD");
        alert($dive.html());

        2. js 转 jqery
        var dive = document.getElementById("myD");
        alert($(dive).html());

        3. jqery 转 js
         var $dive = $("#myD");
         alert($dive[0].innerHTML);

   })

2.jQuery选择器

2.1 基本选择器

2.2层级选择器

子代选择器

选择ul下的所有span子元素
$('ul>span').css('background', 'red');

后代选择器

选择ul下的所有span元素
$('ul span').css('background', 'red');

兄弟选择器

选中id为box的下一个兄弟li
$('#box+li').css('background', 'red');

2.3 基本过滤选择器

 //odd 是奇数 显示的是偶数列 从0开始
  $('tr:odd').css('color','blue');
  $('tr:even').css('color','blue');

$('tr:last').css('background', 'red');
$('tr:first').css('background', 'red');
//实现让下标（从0开始）小于2的行数的背景变为红色
$('tr:lt(2)').css('background', 'red');
 //实现让下标（从0开始）大于2的行数的背景变为红色
$('tr:gt(2)').css('background', 'red');
 //实现让下标（从0开始）不等于2的行数的背景变为红色
$('tr:not(tr:eq(2))').css('background', 'red');
 //实现让内容为“男”的单元格的背景变为红色
$('td:contains("男")').css('background', 'red');
//实现让内容为空的单元格的背景变为红色
$('td:empty').css('background', 'red');
 //实现让内容不为空的单元格的背景变为红色
$('td:parent').css('background', 'red');

 属性筛选器

//查找herflang属性的标签元素
 $('[hreflang]').css('background', 'red');
 //查找hreflang属性值是en的所有超链接
 $('a[hreflang="en"]').css('background', 'red');

 子元素筛选器

 //选择所有父级元素ul下的第一个子元素li
 $('ul li:first-child').css('background', 'red');
 //选择所有父级元素ul下的第二个子元素li
 $('ul li:nth-child(2)').css('background', 'red');

2.4表单过滤器

$('input:text').css('background', 'red');

 $("#b1").click(function(){
 var $input = $("input[hu='bb']");
 $input.val("input标签可用文本输入框的值被改变");
  });


<form>
        <input type="text"><br>
        <input type="button" hu="bb" value="按钮" id="b1"><br>
</form>