JQuery基础

最新推荐文章于 2024-08-28 20:58:28 发布

Java_JR_Chen

最新推荐文章于 2024-08-28 20:58:28 发布

阅读量286

点赞数

文章标签： jquery java 技术编程

本文链接：https://blog.csdn.net/sinat_24019937/article/details/48107197

版权

JQuery是一个快速的，简洁的JavaScrip函数库，使用户能够更加方便地处理HTML文档，事件，实现动画效果，并且方便地为网站提供AJAX交互。

id选择器：jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器：

$("#my_id")，

其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。

<span style="font-family:SimHei;font-size:18px;"><script type="text/javascript" src="jquery-1.8.0.js"></script>
  <body>
     <input id="in" name="in" value="abc" />
  </body>
  <script type="text/javascript">
       var inPutObj = document.getElementById("in");
  	   var jv = inPutObj.value;
       
       var jqObj = $("#in");
       var jqv =  jqObj.val(); 
  	   
  	   document.write(inPutObj.value +"_____"+jqv+"<br/>");
  </script></span>

执行结果：abc_____abc

元素选择器：

在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的<div>、<span>各个元素，虽然同属于一个容器，但有各自的功能，jQuery中可以根据元素名查找元素，格式如下：

$(“element”)

其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们就可画画了，通过元素名找到元素就可以对它进行操作了。 attr（）方法的功能是设置或获取元素的某项属性值。

<span style="font-family:SimHei;font-size:18px;"> <body>
        <button id="btntest">点我</button>
        <script type="text/javascript">
            $("button").attr("disabled","true");
        </script>
    </body></span>

执行结果：按钮变成灰色

<span style="font-family:SimHei;font-size:18px;"> <body>
         <div id="div1" class="divClass"></div>
	<div id="div2" class="divClass"></div>
	<div id="div3" name="div3" class="divClass1"></div>
  </body>
<script type="text/javascript">
var jqDiv = $("div").eq(0);
document.write("元素选择器："+jqDiv.attr("class")+"<br/>");
</script></span>

执行结果：元素选择器：divClass

类选择器：还可以通过元素的类别属性查找元素。

它的调用格式如下：$(“.class”)

<span style="font-family:SimHei;font-size:18px;"><body>
    <input id="in" name="in" value="abc" />  
    <div id="div1" class="divClass"></div>
	<div id="div2" class="divClass"></div>
	<div id="div3" name="div3" class="divClass1"></div>
  </body>
	//类选择器
        var jqClass = $(".divClass");
        document.write("class类选择器："+jqClass.length+"<br/>");</span>

执行结果：class类选择器：2

*”号选择器

它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素

格式为：$(“*”)

<span style="font-family:SimHei;font-size:18px;"><div>
    <span></span>
    <p></p>
    <label></label>
  </div>
  </body>
  <script type="text/javascript">
  $("div *").html("*选择器");
  </script></span>

执行结果：

*选择器

:first选择器：

在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？

在下面的示例代码中你可能注意到我们会使用

$(“li:first”)

<span style="font-family:SimHei;font-size:18px;"> <body>
        <div>改变最后一行"苹果"背景颜色：</div>
        <ol>
            <li>葡萄</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>西瓜</li>
            <li>苹果</li>
        </ol>
        
        <script type="text/javascript">
            $("li:last").css("background-color", "red");
        </script>
    </body></span>

:eq(index)选择器：

如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用

:eq(index)其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。例如：

<span style="font-family:SimHei;font-size:18px;"><body>
        <div>改变中间行"葡萄"背景颜色：</div>
        <ol>
        <li>橘子</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>苹果</li>
        <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:eq(2)").css("background-color", "#60F");
        </script>
    </body></span>

attr(1个参数)，是取这个key的值

attr(2个参数)：第一个参数是key 第二个是value 其实就是给key赋值

contains选择器：

有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

<span style="font-family:SimHei;font-size:18px;"><body>
        <div>改变包含"jQuery"字符内容的背景色：</div>
        <ol>
            <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
        </ol>
        
        <script type="text/javascript">
           $("li:contains('jQuery')").css("background", "green");
        </script>
    </body></span>

：hidden选择器：

过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。

<span style="font-family:SimHei;font-size:18px;">  <body>
        <h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
        <div></div>
        
        <script type="text/javascript">
        var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);
    </script>
    </body></span>

:has(selector)过滤选择器：

:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。

<span style="font-family:SimHei;font-size:18px;"><body>
        <div>改变包含"label"元素的背景色：</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>
            <li><p>我也是P先生</p></li>
            <li><label>我也是L妹纸哦</label></li>
            <li><p>P先生就是我哦</p></li>
        </ol>
        
         <script type="text/javascript">
            $("li:has('label')").css("background-color", "blue");
        </script>
    </body></span>

[attribute=value]属性选择器：

使用[attribute=value]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色，如图所示：

<span style="font-family:SimHei;font-size:18px;"><pre name="code" class="javascript"> <body>
        <h3>改变"title"属性值为"蔬菜"的背景色</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
           $("li[title='蔬菜']").css("background-color", "green");
        </script>
</span>

使用[attribute!=value]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部元素

【attr!=value】不等于value的

【attr^=value】以value开始的

<span style="font-family:SimHei;font-size:18px;">//【attr!=value】不等于value的
document.write("【attr!=value】 "+$("input[name!=in]").attr("id")+"<br/>");
//【attr^=value】以value开始的
document.write("【attr^=value】 "+$("input[name^=in]").eq(1).attr("name")+"<br/>");

</span>

<span style="font-family:SimHei;font-size:18px;"><div id="div4" name="div3" class="divClass">div4 name=div3 class=divclass</div></span>

<span style="font-family:SimHei;font-size:18px;">document.write("【attr^=value】 "+$("div[name='div3'][class=divClass]").html()+"<br/>");
document.write("【attr^=value】 "+$("div[name='div3'][class=divClass]").text()+"<br/>");</span>

执行结果：

【attr^=value】 div4 name=div3 class=divclass
【attr^=value】 div4 name=div3 class=divclass

.removeAttr（）删除属性：

<span style="font-family:SimHei;font-size:18px;"><input id="inputRemove" name="inputRemove"/>
document.write("removeAttr "+$("#inputRemove").removeAttr("name").attr("name")+"<br/>");</span>

<span style="font-family:SimHei;font-size:18px;">执行结果：</span>

<span style="font-family:SimHei;font-size:18px;">removeAttr undefined</span>

.hasClass()筛选：

<span style="font-family:SimHei;font-size:18px;"><div id="div1" class="divClass"></div>
document.write("hasClass "+$("#div1").hasClass("divClass")+"<br/>");</span>

执行结果：true

.parent()筛选

<span style="font-family:SimHei;font-size:18px;"><div id="childDiv" >
		<ul name="ulName">
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
			<li id="ulLi">list item 5</li>
		</ul>
		<ul id="ulAdd">
			<li></li>
		</ul>
	</div>
document.write("parent() "+$("#ulLi").parent().attr("name") +"<br/>");</span>

执行结果：parent() ulName

.find()筛选

<span style="font-family:SimHei;font-size:18px;">document.write("find "+$("#childDiv").find("li").length +"<br/>");</span>

执行结果：find 5

.children()子元素筛选：

document.write("children "+$("#childDiv").children().length +"<br/>");

执行结果：children 2

显示，隐藏效果：

<span style="font-family:SimHei;font-size:18px;"><body>
<p id="dispP" style="display: none">隐藏的东西显示了</p>
<input type="button" value="显示" οnclick="showP()"/>

<p id="hideP" >显示的内容隐藏</p>
<input type="button" value="隐藏" οnclick="hideP()"/>

<p id="toggleId" >既可以显示也可以隐藏</p>
<input type="button" value="toggleId" οnclick="toggleClick()"/>
  </body>
  <script type="text/javascript">

function showP(){
  $("#dispP").show();
}

 function hideP()
 {
 	$("#hideP").hide();
 }
 function toggleClick()
 {
 	$("#toggleId").toggle();
 }
</script></span>