jquery

最新推荐文章于 2023-07-07 14:28:52 发布

phoenix_qiqi

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量871

点赞数

文章标签： jquery function input whitespace button properties

本文链接：https://blog.csdn.net/phoenix_qiqi/article/details/6157381

版权

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

#Movediv {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}

</style>

function readyTest() {
   //text ----seelct elements by id
   $("#txt1").attr("value","123");
   var txt1Val = $('#txt1').val();
   $('#txt2').attr("value","text1 value =" + txt1Val );

// get elements by class name element type.class
$('input.naviTxt').attr("value","123");

//get elemnets by attribute
$('input[name=txtNm4]').attr("value","456"); //beware, this can be very slow

//find a whose rel attribute
//ends with "end"
$("a[rel$='end']").attr("href","wwww.test.com");

//testing whether a selection contains elements
if($('div').length) {
//alert($('div').length);
}

if($('div.naviTxt').length) {
// alert($('div.naviTxt').length);
}

//refining selections
$('div.foo').has('p');   //div.foo elements that contain <p> `s
$('h1').not('.bar');    //h1 elements that don`t have a class of bar
    $('ul li').filter('.current'); //unordered list items with class of current
$('ul li').first();             // just the first unordered list item
$('ul li').eq(5)           // the sixth

$("#myForm :input").eq(1).attr("value", "79794") //using form-related pseduo-selectors
//:button select <button> elecmnets and elements with type="button"
//:checkbox selects inputs with type="checkbox"
//:checked selects checked inputs
//disabled selects disabled form elecmnets
//:enabled selects endabled form elecments
//:file slelcts inputs with type="file"
//:inmage slects inputs with type="inmage"
//:input selects<input>,<textarea>,and<select>elements
//:password selects inputs with type="password"
//:radio selects inputs with type="reset"
//:selected selects optinos that are selected
//:submit selects inputs with type="submit"
//:text selects inputs with type="text"

//formatting chained code
$('#content').find('h3')
              .eq(2)
     .html('new text for the third h3!');

//The $.fn.html method used as a setter
$('h1').eq(0).html('hello!');
$('h1').eq(1).html('hello world!');
//$('h1').html('hello!');

//the html mehtod used as a getter
var testVal = $('h3').html();
$('#txt5').attr("value",testVal);

//getting css properties
$('h1').css('fontSize');

//setting css properties
$('h1').css('fontSize','100px'); //setting an individual property
$('h1').css({'fontSize' : '100px', 'color' : 'red'}); //setting multiple property the css protery font-seize is expressed as fontSize in javaScript.

//working with classes
var $h1 = $('h1');
$h1.addClass('naviTxt');
$h1.removeClass('naviTxt');
$h1.toggleClass('naviTxt');

if($h1.hasClass('naviTxt')){$h1.removeClass('naviTxt');}

//basic dimendions methods
$('h1').width('50px'); //sets the width of all h1 elements
$('h1').width(); //gets the width of the first h1

$('h1').height('50px'); //sets the height of all h1 elements
$('h1').height(); //gets the height of the first h1
$('h1').position(); //returns an object containting position information for the first h1 relative to its "offset (positioned) parent"

//$.fn.attr as a setter can accept either a key and a vaule, or an object containing one or more key/value pairs
$('.a1').attr('href','http://www.baidu.com');
    var aVal = $('.a1').attr('href');
    $('#txt6').attr("value",aVal);
$('.a1').attr({'href' : 'http://www.baidu.com',
                 'title' : 'somethingNew.html'});

var aTxt = $('h3').text();
$('#txt6').attr("value",aTxt);

//$.fn.html   get or set the html
//$.fn.text   get or set text contextsl html will be stripped.
//$.fn.attr   get or set the value ofthe provided attribute
//$.fn.width get or set width in pixels of the first enlemnet in the selection as an integer
//$.fn.height get or set the height in pixels of the firest element in the selection as an integer
//$.fn.position get an object with position information for the first element int the selection,relative to its first positioned ancestor. this is a getter only
//$.fn.val       get or set the value of form elements

//$('div.foo').has('p') div.foo elements that contain <p>
//$('h1').not('.bar') h1 elements that dont have a class of bar
//$('ul li').filter('.current') unordered list items with class of current
//$('ul li').eq()

//:button select <button> elements and elements with type="button"
//:checkbox selects inputs with type ="checkbox"
//:checked   selects checked inputs
//:disbled    selects disabled form elements
//:enabled   selects enabled form elements
//:file      selects inputs with type="image"
//:input     selects<input>,<textarea>,and <select> elements
//:password   selects inputs with type="password"
    //:radio     selets inputs with type="radio"
//:reset     selects inputs with type="reset"
//:selected selects options that are selected
//:submit    selects inputs with type="submit"
//:text      selects inputs with type="text"
                                                 //$("#myForm :input"); //get all elements that accept input

     //formatting chained code
//   $('#content')
//    .find('h3')
//    .eq(2)
//    .html('new text for the third h3')

/*$.ajax({
//the url for the request
url : 'listManagement.nhn?m=test',

beforeSend : function() {$('#waitDiv').show();},

//request type
type : 'POST',

dataType : "json",

//data to send
data : "uploadFilePath=" + $('#uploadFilePath').val() + "&pageFlag=" + $('#pageFlag').val(),

//code to run if the request fails
error : function(xhr,status) {$('#waitDiv').hide();alert(status);},

    //code to run if the request succeeds
  success : function(json) {var list = json.listInfoResult; alert(list[1].endRow);$('#waitDiv').hide();},

//code to run regardless of success or failure
    complete : function(xhr, status) {alert('The request is complete!');}

});
}); */

  //cloning(copying) elecments
        //$('.liTest').clone().appendTo('.toLi');
        $('.hello').clone().appendTo('.goodbye');

//moving elements
$('.liTest').appendTo('.toLi');

//removing elements
$('#a2').remove();

  //create elements
  var $newElement = $('<p>This is a new paragraph</p>');
        $newElement.insertAfter('ul:first');
  $('ul').last().after($newElement.clone());

  //appen method add new element
  var myItems =[];
  var $myList = $('#myList1');

  for (var i=0; i<5 ; i++) {
     myItems.push('<li> item'+i+'</li>');
  }

$myList.append(myItems.join(""));

    //utility methods
       //$.trim removes leading and trailing whitespace
    //$.each iterates over arrays and objects.
    //$.inArray returns a value,s index in an array, or -1 if the value is not in the array.
    //$.extend changes the properties of the first object using the properties of subsequent objects
    //$.proxy if you have an object with menthods you can pass the object and the name of a method to return a function that will always ren in the scope of the object

$.trim(' lots of extra whitespace '); //returns 'lost of extra whitespace'

    /*
    $.each(['foo', 'bar', 'baz'], function(idx, val){
       console.log('element' + idx + 'is' + val);
    });

    $.each({foo:'bar', baz:'bim'}, function(k,v){
       console.log(k + ':' + v);
    });

    */
    //
    $.each({foo:'bar', baz:'bim'}, function(k,v){
       $('#txt8').attr('value', k + ':' + v);
    });
    ///

    //@@@@@@@@@@@@@@@@@@@@@@@@@@@
           var myArray = [1,2,3,4,5];
     if($.inArray(4, myArray) !== -1){
        $('#txt7').attr('value', 'found it');
     }
    //@@@@@@@@@@@@@@@@@@@@@@@@@@@

    //%%%%%%%%%%%%%%%%%%%%%%%%%%%
    var firstObject = {foo : 'bar', a : 'b'};
    var secondObject = {foo : 'baz'};

    var newObject = $.extend(firstObject, secondObject);
          $('#txt9').attr('value', newObject.foo + firstObject.foo );
          //%%%%%%%%%%%%%%%%%%%%%%%%%%%

          //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
    var myObject = {
        myFn : function() {
           $('#txt10').attr('value', this );
     }
    };
          //$('#foo').click(myObject.myFn); // logs Dom element #foo
          //$('#foo').click($.proxy(myObject, 'myFn')); // logs Dom element #foo
    //&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

$('#div1').data('keyName', {foo : 'bar'});

//later, we don not have to find the div again , we can just read it from the list items data
$('#div1').data('keyName');

         //cnoflicts with other libraries
   //var j = jQuery.noConflict();
         // Do something with jQuery
        // j("div p").hide();
         // Do something with another library's $()
         //$("content").style.display = 'none';

   //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     /* <script type="text/javascript" src="other_lib.js"/>
   <script type="text/javascript" src="jquery.js"/>
   <script type="text/javascript">
     $.noConflict();
     jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
     });
     // Code that uses other library's $ can follow here.
   <script>*/

   /* jQuery.noConflict();
   // Do something with jQuery
   jQuery("div p").hide();
   // Do something with another library's $()
   $("content").style.display = 'none';*/

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

         //run only once
   /* $('#submit1').one('click', function() {
        alert('hahaha');
   });
         var foo = function() {alert('hahaha');}
   $('#submit1').bind('click', foo);
   $('#submit1').unbind('click',foo );

$('#submit1').delegate('click', foo);
$('#submit1').undelegate('click', foo);

$('#submit1').live('click', foo);
$('#submit1').die('click', foo);*/

      //table change background
   $("#testTable").find('tr').hover(
  function(){$(this).addClass("blue")},
  function(){$(this).removeClass("blue")}
   );

   //two or more functions each tiem the event occurs
   $("#submit2").toggle(
  function(){ $("#submit1").hide('slow');},
  function(){ $("#submit1").show('fast');},
  function(){alert(3);}
   );

     //animate the opacity of the selected elements to 100%
// $("#testEffect").fadeOut('slow');
// $("#testEffect").fadeIn();
//$('#submit3').toggle(
    // function() { $("#testEffect").slideUp(1600);},
   //function() { $("#testEffect").show(1600);}
// );

$('#submit3').click(
// function() { $("#testEffect").slideToggle(1600);}
//function() { $("#Movediv").animate({"left": "+=50px"}, "slow");}
function() { $("#Movediv").animate({"left": "+=50px"}, "slow").delay(1000).hide(300);}
);
}
</script>

</HEAD>

<body>
<form id="myForm">
   <input type="text" id="txt1" value="" size="20"/>    <input type="text" id="txt2" value="" size="20"/> <br>
    <input type="text" id="txt7" value="*************" size="20"/>     <br>
    <input type="text" id="txt8" value="*************" size="20"/>     <br>
   <input class="naviTxt" type="text" id="txt3" value="" size="20"/> <br>
   <input type="text" id="txt4" name="txtNm4" value="" size="20"/>
   <input type="text" id="txt9" name="txtNm9" value="" size="20"/>   <br>
    <input type="text" id="txt10" name="txtNm10" value="" size="20"/>
   <a rel="friend" href="http://www.functravel.com/">Cheap Flights</a>

   <h1></h1> <h1></h1>

   <h3>test Get method</h3> <input type="text" id="txt5" name="txtNm5" value="" size="20"/>

<a id="a1" href="">google</a> <input type="text" id="txt6" name="txtNm6" value="" size="20"/>

   <div id = "myList">
  <ul>
     <li class="liTest">Coffee</li>
     <li>Tea</li>
     <li>Milk</li>
  </ul>
   </div>

<a id="a2" href="">baidu</a>

<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<ul id="myList1"></ul>

    <div id="testDiv">
     <a></a>
  <a href="#">aaaaa</a>
</div>
<br><br><br>
     <input type="button" id="submit1" name="submi1t" value="submit1" size="20"/>
   <p id="toggle"> <input type="button" id="submit2" name="submit2" value="submit2" size="20"/> </p>
   <input type="button" id="submit3" name="submit3" value="submit3" size="20"/>
<table id="testTable" border="1">
<tr>
   <td>test background1</td>
</tr>
<tr>
   <td>test background2</td>
</tr>
</table>
<br>
<div id="testEffect" style="width:50px; height:60px;background:#D1FFA6;border-style:solid;border-width:1px; border-color:#D1FFA6;"></div>
<div id="Movediv"/>
</form>
</body>
</html>