Jquery

Jquery

 

jquery入门

导入jquery  <script type="text/javascript" src="jquery-3.2.1.js"></script>

function $(){

alert("你好");

}

alert($);

//$是jquery的入口其实就是一个函数 这个函数 可以传入不同类型参数  匿名函数 字符串

//传入的函数 ==window.onload

$(function(){

alert(document.getElementById("t"));

});

//不推荐使用过期了

$(document).ready(function(){

//这个匿名函数可以在dom元素初始化完成后 完成自定义的代码逻辑  

alert("Hello World!");

});

Jquery对象与dom对象

dom对象 

标签对象(Button Anchord等)Window Document对象javascript语言中的

var body=document.body;

alert(body);

 

jquery对象

css选择器jquery选择器 找到满足选择器天剑的dom元素相关的jquery对象(jquery对象其实就是一个包含了dom对象的数组)

jquery对象 不能调用js的方法和属性 只能调用jquery内置的属性的方法

var jqueryObj=$("#username");

alert(jqueryObj.val());

 

如果需要调用js的属性和方法需要将

Jquery对象与dom对象之间的转换

jquery对象转换成dom对象

var domObj=jqueryObj[0]

alert(domObj.value);

 

dom对象转化为jquery

var userDom=document.getElementById("username")

 

var tt=$(userDom);

alert(tt.val());

一些方法的用法

Eq和get

$(function(){

var jo=$("input");

//eq是获取 选择器中的多个jquery对象中 索引指定的那个

alert(jo.eq(0).val());

//get 返回的是dom对象

alert(jo.get(0).value);

})

奇偶行变色

$(function(){

$("tr:odd").css("backgroundColor","green");

$("tr:even").not("[type='header']").css("backgroundColor","red");

})

 

//jquery方法的特点是 一般带一个参数 表示获取该参数的值 两个参数 表示设置值

alert($("input").attr("type"));

Attr 是修改dom对象的属性值

$("input").attr("type","password");

addclass添加内部样式样式到dom元素

$("#myDiv").addClass("myClass");

$("#myDiv").removeClass("myClass");

val() 获取或者设置文本框的值

$("input").val("234");

//html()会将div中的所有都会弹出包括标签,text()只弹文本

alert($("#myDiv").html());

alert($("#myDiv").text()); $("#myDiv").html("<font color=red>这是div</font>")

append追加在后面,prepend追加在前面

$("table").append("<tr ><td>张三</td><td>男</td><td>21</td></tr>");

$("table").prepend("<tr ><td>张三</td><td>男</td><td>21</td></tr>");

Each()的用法:

 $("#but5").click(function(){

var arr = $("[type='checkbox']:checked");

   var value="";

$.each(arr,function(k,v){

value+=$(v).val();

})